@just-web/react-intl 1.0.0 → 1.1.1

package/cjs/react_intl_gizmo.d.ts

@@ -1,19 +1,24 @@
-/// <reference types="react" />
+import React from 'react';
 import { define } from '@just-web/app';
 import { type FormatJSGizmoOptions } from '@just-web/formatjs';
 import { type IntlShape } from 'react-intl';
-export declare const reactIntlGizmoFn: (options: FormatJSGizmoOptions<string>) => import("@just-web/app").GizmoStatic<import("@just-web/app").DepBuilder<{
+export type ReactIntlGizmoOptions<T = string> = FormatJSGizmoOptions<T>;
+export declare const reactIntlGizmoFn: <T = string>(options?: ReactIntlGizmoOptions<T> | undefined) => import("@just-web/app").GizmoStatic<import("@just-web/app").DepBuilder<{
     react: {
         providers: {
-            register(Component: import("react").JSXElementConstructor<{
-                children: import("react").ReactNode;
+            register(Component: React.JSXElementConstructor<{
+                children: React.ReactNode;
             }>): void;
-            values(): IterableIterator<import("react").JSXElementConstructor<{
-                children: import("react").ReactNode;
+            values(): IterableIterator<React.JSXElementConstructor<{
+                children: React.ReactNode;
             }>>;
         };
     };
-}, unknown>, [{
+}, {
+    formatjs: {
+        intl: import("@just-web/formatjs").IntlShape<unknown>;
+    };
+}>, [{
     react_intl: {
         intl: IntlShape;
     };

package/cjs/react_intl_gizmo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react_intl_gizmo.d.ts","sourceRoot":"","sources":["../ts/react_intl_gizmo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAY,MAAM,eAAe,CAAA;AAChD,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,oBAAoB,CAAA;AAE/E,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,YAAY,CAAA;AAE5D,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;eAgB1B,CAAA;AAEH,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,gBAAgB,CAAC,CAAA"}
+{"version":3,"file":"react_intl_gizmo.d.ts","sourceRoot":"","sources":["../ts/react_intl_gizmo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAY,MAAM,eAAe,CAAA;AAChD,OAAO,EAAuC,KAAK,oBAAoB,EAAE,MAAM,oBAAoB,CAAA;AAEnG,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,YAAY,CAAA;AAE5D,MAAM,MAAM,qBAAqB,CAAC,CAAC,GAAG,MAAM,IAAI,oBAAoB,CAAC,CAAC,CAAC,CAAA;AAEvE,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;eAkB3B,CAAA;AAEF,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,gBAAgB,CAAC,CAAA"}

package/cjs/react_intl_gizmo.js

@@ -1,22 +1,31 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.reactIntlGizmoFn = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const app_1 = require("@just-web/app");
 const formatjs_1 = require("@just-web/formatjs");
 const react_intl_1 = require("react-intl");
-exports.reactIntlGizmoFn = (0, app_1.define)((options) => ({
-    static: app_1.define.require(),
-    async create({ react }) {
-        const { formatjs } = await (0, app_1.incubate)().with((0, formatjs_1.formatJSGizmoFn)(options)).create();
-        return [
-            {
-                react_intl: {
-                    intl: formatjs.intl
-                }
-            },
-            () => react.providers.register(({ children }) => ((0, jsx_runtime_1.jsx)(react_intl_1.RawIntlProvider, { value: formatjs.intl, children: children })))
-        ];
-    }
-}));
+exports.reactIntlGizmoFn = (0, app_1.define)(function (options) {
+    return {
+        static: app_1.define.require().optional(),
+        async create(ctx) {
+            const formatjs = await getFormatjs(ctx, options);
+            return [
+                {
+                    react_intl: {
+                        intl: formatjs.intl
+                    }
+                },
+                () => ctx.react.providers.register(({ children }) => (react_1.default.createElement(react_intl_1.RawIntlProvider, { value: formatjs.intl }, children)))
+            ];
+        }
+    };
+});
+async function getFormatjs(ctx, options) {
+    if (ctx.formatjs)
+        return ctx.formatjs;
+    if (!options)
+        throw new Error('options is required when there is no formatjs gizmo');
+    return (await (0, app_1.incubate)().with((0, formatjs_1.formatJSGizmoFn)(options)).create()).formatjs;
+}
 //# sourceMappingURL=react_intl_gizmo.js.map

package/cjs/react_intl_gizmo.js.map

@@ -1 +1 @@
-{"version":3,"file":"react_intl_gizmo.js","sourceRoot":"","sources":["../ts/react_intl_gizmo.tsx"],"names":[],"mappings":";;;;AAAA,uCAAgD;AAChD,iDAA+E;AAE/E,2CAA4D;AAE/C,QAAA,gBAAgB,GAAG,IAAA,YAAM,EAAC,CAAC,OAA6B,EAAE,EAAE,CAAC,CAAC;IAC1E,MAAM,EAAE,YAAM,CAAC,OAAO,EAAc;IACpC,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE;QACrB,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,IAAA,cAAQ,GAAE,CAAC,IAAI,CAAC,IAAA,0BAAe,EAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,CAAA;QAC7E,OAAO;YACN;gBACC,UAAU,EAAE;oBACX,IAAI,EAAE,QAAQ,CAAC,IAAiB;iBAChC;aACD;YACD,GAAG,EAAE,CACJ,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAC1C,uBAAC,4BAAe,IAAC,KAAK,EAAE,QAAQ,CAAC,IAA4B,YAAG,QAAQ,GAAmB,CAC3F,CAAC;SACH,CAAA;IACF,CAAC;CACD,CAAC,CAAC,CAAA"}
+{"version":3,"file":"react_intl_gizmo.js","sourceRoot":"","sources":["../ts/react_intl_gizmo.tsx"],"names":[],"mappings":";;;AAAA,iCAAyB;AACzB,uCAAgD;AAChD,iDAAmG;AAEnG,2CAA4D;AAI/C,QAAA,gBAAgB,GAAG,IAAA,YAAM,EAAC,UAAsB,OAAkC;IAC9F,OAAO;QACN,MAAM,EAAE,YAAM,CAAC,OAAO,EAAc,CAAC,QAAQ,EAAiB;QAC9D,KAAK,CAAC,MAAM,CAAC,GAAwC;YACpD,MAAM,QAAQ,GAAG,MAAM,WAAW,CAAC,GAAG,EAAE,OAAO,CAAC,CAAA;YAChD,OAAO;gBACN;oBACC,UAAU,EAAE;wBACX,IAAI,EAAE,QAAQ,CAAC,IAAiB;qBAChC;iBACD;gBACD,GAAG,EAAE,CACJ,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAC9C,8BAAC,4BAAe,IAAC,KAAK,EAAE,QAAQ,CAAC,IAAiB,IAAG,QAAQ,CAAmB,CAChF,CAAC;aACH,CAAA;QACF,CAAC;KACD,CAAA;AACF,CAAC,CAAC,CAAA;AAIF,KAAK,UAAU,WAAW,CAAC,GAA2B,EAAE,OAA+C;IACtG,IAAI,GAAG,CAAC,QAAQ;QAAE,OAAO,GAAG,CAAC,QAAQ,CAAA;IACrC,IAAI,CAAC,OAAO;QAAE,MAAM,IAAI,KAAK,CAAC,qDAAqD,CAAC,CAAA;IACpF,OAAO,CAAC,MAAM,IAAA,cAAQ,GAAE,CAAC,IAAI,CAAC,IAAA,0BAAe,EAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,QAAQ,CAAA;AAC3E,CAAC"}

package/esm/react_intl_gizmo.d.ts

@@ -1,19 +1,24 @@
-/// <reference types="react" />
+import React from 'react';
 import { define } from '@just-web/app';
 import { type FormatJSGizmoOptions } from '@just-web/formatjs';
 import { type IntlShape } from 'react-intl';
-export declare const reactIntlGizmoFn: (options: FormatJSGizmoOptions<string>) => import("@just-web/app").GizmoStatic<import("@just-web/app").DepBuilder<{
+export type ReactIntlGizmoOptions<T = string> = FormatJSGizmoOptions<T>;
+export declare const reactIntlGizmoFn: <T = string>(options?: ReactIntlGizmoOptions<T> | undefined) => import("@just-web/app").GizmoStatic<import("@just-web/app").DepBuilder<{
     react: {
         providers: {
-            register(Component: import("react").JSXElementConstructor<{
-                children: import("react").ReactNode;
+            register(Component: React.JSXElementConstructor<{
+                children: React.ReactNode;
             }>): void;
-            values(): IterableIterator<import("react").JSXElementConstructor<{
-                children: import("react").ReactNode;
+            values(): IterableIterator<React.JSXElementConstructor<{
+                children: React.ReactNode;
             }>>;
         };
     };
-}, unknown>, [{
+}, {
+    formatjs: {
+        intl: import("@just-web/formatjs").IntlShape<unknown>;
+    };
+}>, [{
     react_intl: {
         intl: IntlShape;
     };

package/esm/react_intl_gizmo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react_intl_gizmo.d.ts","sourceRoot":"","sources":["../ts/react_intl_gizmo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAY,MAAM,eAAe,CAAA;AAChD,OAAO,EAAmB,KAAK,oBAAoB,EAAE,MAAM,oBAAoB,CAAA;AAE/E,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,YAAY,CAAA;AAE5D,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;eAgB1B,CAAA;AAEH,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,gBAAgB,CAAC,CAAA"}
+{"version":3,"file":"react_intl_gizmo.d.ts","sourceRoot":"","sources":["../ts/react_intl_gizmo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAY,MAAM,eAAe,CAAA;AAChD,OAAO,EAAuC,KAAK,oBAAoB,EAAE,MAAM,oBAAoB,CAAA;AAEnG,OAAO,EAAmB,KAAK,SAAS,EAAE,MAAM,YAAY,CAAA;AAE5D,MAAM,MAAM,qBAAqB,CAAC,CAAC,GAAG,MAAM,IAAI,oBAAoB,CAAC,CAAC,CAAC,CAAA;AAEvE,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;eAkB3B,CAAA;AAEF,MAAM,MAAM,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,gBAAgB,CAAC,CAAA"}

package/esm/react_intl_gizmo.js

@@ -1,19 +1,28 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
 import { define, incubate } from '@just-web/app';
 import { formatJSGizmoFn } from '@just-web/formatjs';
 import { RawIntlProvider } from 'react-intl';
-export const reactIntlGizmoFn = define((options) => ({
-    static: define.require(),
-    async create({ react }) {
-        const { formatjs } = await incubate().with(formatJSGizmoFn(options)).create();
-        return [
-            {
-                react_intl: {
-                    intl: formatjs.intl
-                }
-            },
-            () => react.providers.register(({ children }) => (_jsx(RawIntlProvider, { value: formatjs.intl, children: children })))
-        ];
-    }
-}));
+export const reactIntlGizmoFn = define(function (options) {
+    return {
+        static: define.require().optional(),
+        async create(ctx) {
+            const formatjs = await getFormatjs(ctx, options);
+            return [
+                {
+                    react_intl: {
+                        intl: formatjs.intl
+                    }
+                },
+                () => ctx.react.providers.register(({ children }) => (React.createElement(RawIntlProvider, { value: formatjs.intl }, children)))
+            ];
+        }
+    };
+});
+async function getFormatjs(ctx, options) {
+    if (ctx.formatjs)
+        return ctx.formatjs;
+    if (!options)
+        throw new Error('options is required when there is no formatjs gizmo');
+    return (await incubate().with(formatJSGizmoFn(options)).create()).formatjs;
+}
 //# sourceMappingURL=react_intl_gizmo.js.map

package/esm/react_intl_gizmo.js.map

@@ -1 +1 @@
-{"version":3,"file":"react_intl_gizmo.js","sourceRoot":"","sources":["../ts/react_intl_gizmo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAChD,OAAO,EAAE,eAAe,EAA6B,MAAM,oBAAoB,CAAA;AAE/E,OAAO,EAAE,eAAe,EAAkB,MAAM,YAAY,CAAA;AAE5D,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,CAAC,OAA6B,EAAE,EAAE,CAAC,CAAC;IAC1E,MAAM,EAAE,MAAM,CAAC,OAAO,EAAc;IACpC,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE;QACrB,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,QAAQ,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,CAAA;QAC7E,OAAO;YACN;gBACC,UAAU,EAAE;oBACX,IAAI,EAAE,QAAQ,CAAC,IAAiB;iBAChC;aACD;YACD,GAAG,EAAE,CACJ,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAC1C,KAAC,eAAe,IAAC,KAAK,EAAE,QAAQ,CAAC,IAA4B,YAAG,QAAQ,GAAmB,CAC3F,CAAC;SACH,CAAA;IACF,CAAC;CACD,CAAC,CAAC,CAAA"}
+{"version":3,"file":"react_intl_gizmo.js","sourceRoot":"","sources":["../ts/react_intl_gizmo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAChD,OAAO,EAAE,eAAe,EAAiD,MAAM,oBAAoB,CAAA;AAEnG,OAAO,EAAE,eAAe,EAAkB,MAAM,YAAY,CAAA;AAI5D,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,UAAsB,OAAkC;IAC9F,OAAO;QACN,MAAM,EAAE,MAAM,CAAC,OAAO,EAAc,CAAC,QAAQ,EAAiB;QAC9D,KAAK,CAAC,MAAM,CAAC,GAAwC;YACpD,MAAM,QAAQ,GAAG,MAAM,WAAW,CAAC,GAAG,EAAE,OAAO,CAAC,CAAA;YAChD,OAAO;gBACN;oBACC,UAAU,EAAE;wBACX,IAAI,EAAE,QAAQ,CAAC,IAAiB;qBAChC;iBACD;gBACD,GAAG,EAAE,CACJ,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAC9C,oBAAC,eAAe,IAAC,KAAK,EAAE,QAAQ,CAAC,IAAiB,IAAG,QAAQ,CAAmB,CAChF,CAAC;aACH,CAAA;QACF,CAAC;KACD,CAAA;AACF,CAAC,CAAC,CAAA;AAIF,KAAK,UAAU,WAAW,CAAC,GAA2B,EAAE,OAA+C;IACtG,IAAI,GAAG,CAAC,QAAQ;QAAE,OAAO,GAAG,CAAC,QAAQ,CAAA;IACrC,IAAI,CAAC,OAAO;QAAE,MAAM,IAAI,KAAK,CAAC,qDAAqD,CAAC,CAAA;IACpF,OAAO,CAAC,MAAM,QAAQ,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,QAAQ,CAAA;AAC3E,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@just-web/react-intl",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "react-intl gizmo for just-web applications",
   "keywords": [
     "just-web",
@@ -55,7 +55,8 @@
     "esm",
     "testing",
     "ts",
-    "!**/*.{spec,test,unit,accept,integrate,system,perf,stress}.*"
+    "!**/*.{spec,test,unit,accept,integrate,system,perf,stress}.*",
+    "!**/*.stories.*"
   ],
   "dependencies": {
     "@just-web/formatjs": "^1.0.2",
@@ -66,8 +67,33 @@
     "@repobuddy/jest": "^3.3.0",
     "@repobuddy/typescript": "^1.2.0",
     "@size-limit/preset-small-lib": "~8.2.0",
+    "@storybook/addon-actions": "^7.0.6",
+    "@storybook/addon-backgrounds": "^7.0.6",
+    "@storybook/addon-console": "~2.0.0",
+    "@storybook/addon-docs": "^7.0.6",
+    "@storybook/addon-essentials": "^7.0.6",
+    "@storybook/addon-interactions": "^7.0.6",
+    "@storybook/addon-links": "^7.0.6",
+    "@storybook/addon-measure": "^7.0.6",
+    "@storybook/addon-outline": "^7.0.6",
+    "@storybook/addon-storysource": "^7.0.6",
+    "@storybook/addon-styling": "^1.0.1",
+    "@storybook/addons": "^7.0.6",
+    "@storybook/channel-postmessage": "^7.0.6",
+    "@storybook/channel-websocket": "^7.0.6",
+    "@storybook/client-api": "^7.0.6",
+    "@storybook/preview-web": "^7.0.6",
+    "@storybook/react": "^7.0.6",
+    "@storybook/react-vite": "7.1.0",
+    "@storybook/test-runner": "^0.11.0",
+    "@storybook/testing-library": "^0.2.0",
     "@types/jest": "^29.5.1",
-    "@types/react": "^17.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.9",
+    "@types/react-test-renderer": "^18.0.0",
+    "@types/testing-library__jest-dom": "~5.14.5",
+    "@vitejs/plugin-react": "^4.0.0",
+    "assertron": "^11.0.1",
     "cross-env": "^7.0.3",
     "depcheck": "~1.4.3",
     "jest": "^29.5.0",
@@ -75,15 +101,20 @@
     "jest-watch-toggle-config-2": "^2.1.0",
     "jest-watch-typeahead": "^2.2.2",
     "npm-run-all": "^4.1.5",
-    "react": "^17.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "repobuddy": "^1.0.1",
     "rimraf": "~5.0.0",
+    "rollup-plugin-node-externals": "^6.0.0",
     "size-limit": "~8.2.0",
+    "storybook": "7.1.0",
+    "storybook-dark-mode": "~3.0.0",
     "ts-jest": "^29.1.0",
     "tslib": "^2.5.0",
     "type-plus": "^7.0.1",
     "typescript": "^5.0.4",
-    "@just-web/react": "^9.0.2"
+    "vite": "^4.3.1",
+    "@just-web/react": "^9.0.4"
   },
   "peerDependencies": {
     "@just-web/react": "^9.0.0",
@@ -99,6 +130,7 @@
     "depcheck": "depcheck",
     "lint": "cross-env TIMING=1 eslint --ext=ts,tsx,js,yaml,yml .",
     "nuke": "rimraf node_modules",
+    "sb": "storybook dev -p 6008",
     "size": "size-limit",
     "test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest",
     "test:watch": "cross-env NODE_OPTIONS=--experimental-vm-modules NODE_NO_WARNINGS=1 jest --watch",

package/ts/react_intl_gizmo.tsx

@@ -1,24 +1,35 @@
+import React from 'react'
 import { define, incubate } from '@just-web/app'
-import { formatJSGizmoFn, type FormatJSGizmoOptions } from '@just-web/formatjs'
+import { formatJSGizmoFn, type FormatJSGizmo, type FormatJSGizmoOptions } from '@just-web/formatjs'
 import type { ReactGizmo } from '@just-web/react'
 import { RawIntlProvider, type IntlShape } from 'react-intl'
 
-export const reactIntlGizmoFn = define((options: FormatJSGizmoOptions) => ({
-	static: define.require<ReactGizmo>(),
-	async create({ react }) {
-		const { formatjs } = await incubate().with(formatJSGizmoFn(options)).create()
-		return [
-			{
-				react_intl: {
-					intl: formatjs.intl as IntlShape
-				}
-			},
-			() =>
-				react.providers.register(({ children }) => (
-					<RawIntlProvider value={formatjs.intl as unknown as IntlShape}>{children}</RawIntlProvider>
-				))
-		]
+export type ReactIntlGizmoOptions<T = string> = FormatJSGizmoOptions<T>
+
+export const reactIntlGizmoFn = define(function <T = string>(options?: ReactIntlGizmoOptions<T>) {
+	return {
+		static: define.require<ReactGizmo>().optional<FormatJSGizmo>(),
+		async create(ctx: ReactGizmo & Partial<FormatJSGizmo>) {
+			const formatjs = await getFormatjs(ctx, options)
+			return [
+				{
+					react_intl: {
+						intl: formatjs.intl as IntlShape
+					}
+				},
+				() =>
+					ctx.react.providers.register(({ children }) => (
+						<RawIntlProvider value={formatjs.intl as IntlShape}>{children}</RawIntlProvider>
+					))
+			]
+		}
 	}
-}))
+})
 
 export type ReactIntlGizmo = define.Infer<typeof reactIntlGizmoFn>
+
+async function getFormatjs(ctx: Partial<FormatJSGizmo>, options: ReactIntlGizmoOptions<any> | undefined) {
+	if (ctx.formatjs) return ctx.formatjs
+	if (!options) throw new Error('options is required when there is no formatjs gizmo')
+	return (await incubate().with(formatJSGizmoFn(options)).create()).formatjs
+}