["useClass"],
219 | };
220 | }
221 | return provider;
222 | });
223 | }
224 |
225 | function stringifyKeys(obj: {}, filter = (k: string) => true) {
226 | return Object.keys(obj)
227 | .filter(filter)
228 | .map((k) => `"${k}"`)
229 | .join(", ");
230 | }
231 |
--------------------------------------------------------------------------------
/test/__snapshots__/react-service-container.test.tsx.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Injection Tokens 1`] = `
4 |
5 | Hello, world!
6 |
7 | `;
8 |
9 | exports[`useExisting with injection tokens 1`] = `
10 |
11 | value 1
12 |
13 | `;
14 |
--------------------------------------------------------------------------------
/test/react-service-container.test.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import renderer from "react-test-renderer";
3 | import {
4 | Provider,
5 | ServiceContainer,
6 | ServiceContainerContext,
7 | useService,
8 | } from "../src";
9 |
10 | class Dep {
11 | fn() {
12 | return "Output!";
13 | }
14 | }
15 |
16 | const Component = () => {
17 | const dep = useService(Dep);
18 | return {dep.fn()}
;
19 | };
20 |
21 | let mock: jest.Mock;
22 | beforeEach(() => {
23 | mock = jest.fn();
24 | jest.spyOn(console, "error").mockImplementation();
25 | jest.spyOn(console, "warn").mockImplementation();
26 | });
27 |
28 | afterEach(() => {
29 | (console.error as jest.Mock).mockRestore();
30 | (console.warn as jest.Mock).mockRestore();
31 | });
32 |
33 | test("useValue", () => {
34 | renderWithProviders([{ provide: Dep, useValue: { fn: mock } }]);
35 | expect(mock).toHaveBeenCalled();
36 | });
37 |
38 | test("useClass", () => {
39 | class MockClass {
40 | fn() {
41 | mock();
42 | }
43 | }
44 |
45 | renderWithProviders([{ provide: Dep, useClass: MockClass }]);
46 | expect(mock).toHaveBeenCalled();
47 | });
48 |
49 | test("useFactory", () => {
50 | const factory = () => ({
51 | fn: mock,
52 | });
53 |
54 | renderWithProviders([{ provide: Dep, useFactory: factory }]);
55 | expect(mock).toHaveBeenCalled();
56 | });
57 |
58 | test("useExisting", () => {
59 | class Existing {
60 | fn() {
61 | mock();
62 | }
63 | }
64 |
65 | renderWithProviders([
66 | { provide: Existing, useClass: Existing },
67 | { provide: Dep, useExisting: Existing },
68 | ]);
69 | expect(mock).toHaveBeenCalled();
70 | });
71 |
72 | test("Class shorthand", () => {
73 | class MockDep {
74 | fn() {
75 | return mock();
76 | }
77 | }
78 |
79 | const Component = () => {
80 | const mockDep = useService(MockDep);
81 | return {mockDep.fn()}
;
82 | };
83 |
84 | renderer.create(
85 |
86 |
87 |
88 | );
89 | expect(mock).toHaveBeenCalled();
90 | });
91 |
92 | test("Injection Tokens", () => {
93 | interface Config {
94 | message: string;
95 | }
96 |
97 | const CONFIG = Symbol.for("config");
98 | const config: Config = { message: "Hello, world!" };
99 |
100 | const useConfig = () => useService(CONFIG) as Config;
101 |
102 | const Component = () => {
103 | const { message } = useConfig();
104 | return {message}
;
105 | };
106 | const component = renderer.create(
107 |
108 |
109 |
110 | );
111 | expect(component.toJSON()).toMatchSnapshot();
112 | });
113 |
114 | test("useExisting with injection tokens", () => {
115 | const V1 = Symbol.for("v1");
116 | const VALIAS = Symbol.for("vAlias");
117 | const v1 = "value 1";
118 |
119 | const useV1 = () => useService(VALIAS) as string;
120 |
121 | const Component = () => {
122 | const v1 = useV1();
123 | return {v1}
;
124 | };
125 |
126 | const component = renderer.create(
127 |
133 |
134 |
135 | );
136 | expect(component.toJSON()).toMatchSnapshot();
137 | });
138 |
139 | test("Hierarchal injection", () => {
140 | const parentMock = jest.fn();
141 | const childMock = jest.fn();
142 | const overrideMock = jest.fn();
143 | const mockToBeOverriden = jest.fn();
144 |
145 | class ParentDep {
146 | fn() {
147 | parentMock();
148 | }
149 | }
150 |
151 | class Child {
152 | fn() {
153 | childMock();
154 | }
155 | }
156 |
157 | class DepToOverride {
158 | fn() {
159 | mockToBeOverriden();
160 | }
161 | }
162 |
163 | class Override {
164 | fn() {
165 | overrideMock();
166 | }
167 | }
168 |
169 | const Component = () => {
170 | const parent = useService(ParentDep);
171 | const child = useService(Child);
172 | const override = useService(DepToOverride);
173 |
174 | return (
175 |
176 | {parent.fn()}
177 | {child.fn()}
178 | {override.fn()}
179 |
180 | );
181 | };
182 |
183 | renderer.create(
184 |
185 |
188 |
189 |
190 |
191 | );
192 |
193 | expect(parentMock).toHaveBeenCalled();
194 | expect(childMock).toHaveBeenCalled();
195 | expect(overrideMock).toHaveBeenCalled();
196 | expect(mockToBeOverriden).not.toHaveBeenCalled();
197 | });
198 |
199 | test("useExisting hierarchal override", () => {
200 | const parentMock = jest.fn();
201 | const childMock = jest.fn();
202 |
203 | class ParentDep {
204 | fn() {
205 | return parentMock();
206 | }
207 | }
208 |
209 | class Child {
210 | fn() {
211 | return childMock();
212 | }
213 | }
214 |
215 | const Component = () => {
216 | const dep = useService(Child);
217 | return {dep.fn()}
;
218 | };
219 |
220 | renderer.create(
221 |
222 |
225 |
226 |
227 |
228 | );
229 | expect(parentMock).toHaveBeenCalled();
230 | expect(childMock).not.toHaveBeenCalled();
231 | });
232 |
233 | test("Class components", () => {
234 | let mock = jest.fn();
235 |
236 | class Dep {
237 | fn() {
238 | return mock();
239 | }
240 | }
241 |
242 | class Component extends React.Component {
243 | static contextType = ServiceContainerContext;
244 |
245 | render() {
246 | const dep = this.context.get(Dep);
247 | return {dep.fn()}
;
248 | }
249 | }
250 |
251 | renderer.create(
252 |
253 |
254 |
255 | );
256 | expect(mock).toHaveBeenCalled();
257 | });
258 |
259 | test("Descriptive error message when useService cannot find context", () => {
260 | const Component = () => {
261 | const dep = useService(Dep);
262 | return {dep.fn()}
;
263 | };
264 |
265 | expect(() => {
266 | renderer.create();
267 | }).toThrow(
268 | "Could not find service container context. It looks like you may have used the useService() hook " +
269 | "in a component that is not a child of a .... Take a look at your component tree " +
270 | "and ensure that somewhere in the hierarchy before this component is rendered, there is a " +
271 | "available"
272 | );
273 | });
274 |
275 | test("Descriptive error when missing provider", () => {
276 | expect(() => {
277 | renderer.create(
278 |
279 |
280 |
281 | );
282 | }).toThrow('Think of this as a "missing variable" error');
283 | });
284 |
285 | test("Descriptive error when provider function throws", () => {
286 | const err = new Error("Provider error");
287 | expect(() => {
288 | renderer.create(
289 | {
294 | throw err;
295 | },
296 | },
297 | ]}
298 | >
299 |
300 |
301 | );
302 | }).toThrow(err);
303 | expect(console.error).toHaveBeenCalledWith(
304 | `[react-service-container] Provider for ${Dep} threw an error. Please check the error output below for more information.`
305 | );
306 | });
307 |
308 | test("Descriptive error message when useExisting lookup fails", () => {
309 | const ALIAS = Symbol.for("alias");
310 | const Component = () => {
311 | const dep = useService(ALIAS);
312 | return {dep.fn()}
;
313 | };
314 |
315 | expect(() => {
316 | renderer.create(
317 |
318 |
319 |
320 | );
321 | }).toThrow(
322 | "It looks like you passed a token to `useExisting` that was not registered as a provider. " +
323 | "Ensure that the token given is registered *before* the alias is referenced. If the value reference by " +
324 | "the alias is provided within the same providers array as the alias, ensure that it comes before the alias " +
325 | "in the providers array."
326 | );
327 | });
328 |
329 | test("Descriptive error when provider is malformed", () => {
330 | // Missing provide
331 | const noProvideKey = { foo: "bar" };
332 | expect(() => {
333 | renderer.create(
334 |
335 |
336 |
337 | );
338 | }).toThrow(
339 | `[react-service-container] Missing "provide" key in object with key(s): "foo". Each provider must specify a "provide" key as well as one of the correct use* values.`
340 | );
341 |
342 | // Missing correct value to go with provide
343 | const wrongUseKey = { provide: Dep, useCls: Dep };
344 | expect(() => {
345 | renderer.create(
346 |
347 |
348 |
349 | );
350 | }).toThrow(
351 | '[create-service-container] Provider missing proper use* value in key(s): "useCls". ' +
352 | 'Possible values are: ["useValue", "useClass", "useFactory", "useExisting"]'
353 | );
354 | });
355 |
356 | test("only instantiates services once", () => {
357 | const mockFactory = jest.fn().mockImplementation(() => new Dep());
358 | renderer.create(
359 |
360 |
361 |
362 |
363 | );
364 | expect(mockFactory).toHaveBeenCalledTimes(1);
365 | });
366 |
367 | function renderWithProviders(providers: Provider[]) {
368 | return renderer.create(
369 |
370 |
371 |
372 | );
373 | }
374 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | /* Visit https://aka.ms/tsconfig.json to read more about this file */
4 |
5 | /* Basic Options */
6 | // "incremental": true, /* Enable incremental compilation */
7 | "target": "es5" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */,
8 | "module": "commonjs" /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */,
9 | // "lib": [], /* Specify library files to be included in the compilation. */
10 | // "allowJs": true, /* Allow javascript files to be compiled. */
11 | // "checkJs": true, /* Report errors in .js files. */
12 | "jsx": "react" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,
13 | "declaration": true /* Generates corresponding '.d.ts' file. */,
14 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
15 | // "sourceMap": true, /* Generates corresponding '.map' file. */
16 | // "outFile": "./", /* Concatenate and emit output to single file. */
17 | "outDir": "lib" /* Redirect output structure to the directory. */,
18 | "rootDir": "src" /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */,
19 | // "composite": true, /* Enable project compilation */
20 | // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */
21 | // "removeComments": true, /* Do not emit comments to output. */
22 | // "noEmit": true, /* Do not emit outputs. */
23 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */
24 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
25 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
26 |
27 | /* Strict Type-Checking Options */
28 | "strict": true /* Enable all strict type-checking options. */,
29 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
30 | // "strictNullChecks": true, /* Enable strict null checks. */
31 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */
32 | // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
33 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
34 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
35 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
36 |
37 | /* Additional Checks */
38 | // "noUnusedLocals": true, /* Report errors on unused locals. */
39 | // "noUnusedParameters": true, /* Report errors on unused parameters. */
40 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
41 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
42 |
43 | /* Module Resolution Options */
44 | // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
45 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
46 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
47 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
48 | // "typeRoots": [], /* List of folders to include type definitions from. */
49 | // "types": [], /* Type declaration files to be included in compilation. */
50 | // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
51 | "esModuleInterop": true /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */,
52 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
53 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
54 |
55 | /* Source Map Options */
56 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
57 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
58 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
59 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
60 |
61 | /* Experimental Options */
62 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
63 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
64 |
65 | /* Advanced Options */
66 | "skipLibCheck": true /* Skip type checking of declaration files. */,
67 | "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
68 | },
69 | "exclude": ["test/", "lib/", "umd/"]
70 | }
71 |
--------------------------------------------------------------------------------
/tsconfig.test.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./tsconfig.json",
3 | "compilerOptions": {
4 | "rootDirs": ["src/", "test/"]
5 | }
6 | }
7 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require("path");
2 | const fileName = require("./package.json").name;
3 | const { merge } = require("webpack-merge");
4 |
5 | const common = {
6 | entry: "./src/index.tsx",
7 | devtool: "source-map",
8 | module: {
9 | rules: [
10 | {
11 | test: /\.tsx?$/,
12 | use: [
13 | {
14 | loader: "ts-loader",
15 | options: {
16 | compilerOptions: {
17 | declaration: false,
18 | },
19 | },
20 | },
21 | ],
22 | exclude: /node_modules/,
23 | },
24 | ],
25 | },
26 | resolve: {
27 | extensions: [".tsx", ".ts", ".js"],
28 | },
29 | output: {
30 | path: path.resolve(__dirname, "umd"),
31 | library: "ReactServiceContainer",
32 | libraryTarget: "umd",
33 | },
34 | externals: {
35 | react: {
36 | commonjs: "react",
37 | commonjs2: "react",
38 | amd: "react",
39 | root: "React",
40 | },
41 | },
42 | };
43 |
44 | const dev = {
45 | mode: "development",
46 | output: {
47 | filename: `${fileName}.js`,
48 | },
49 | };
50 |
51 | const prod = {
52 | mode: "production",
53 | output: {
54 | filename: `${fileName}.min.js`,
55 | },
56 | };
57 |
58 | module.exports = (env) => merge(common, env === "production" ? prod : dev);
59 |
--------------------------------------------------------------------------------