@mondaydotcomorg/z2h-shared-utils 0.2.0 → 0.3.0

package/dist/esm/mfScaffold.d.ts

@@ -0,0 +1,24 @@
+export declare const WRAPPER_TEMPLATE = "import '@vibe/core/tokens';\nimport ConsumerApp from '../../src/index';\nimport React from 'react';\nimport * as ReactDOM from 'react-dom/client';\nimport { ErrorBoundary } from 'react-error-boundary';\n\nconst roots = new Map<HTMLElement, ReactDOM.Root>();\n\nexport function init() {}\n\nexport function render(element: HTMLElement) {\n  const root = ReactDOM.createRoot(element);\n  root.render(\n    <ErrorBoundary fallback={<div style={{ padding: 16 }}>This app crashed.</div>}>\n      <ConsumerApp />\n    </ErrorBoundary>,\n  );\n  roots.set(element, root);\n}\n\nexport function unmount({ element }: { element: HTMLElement }) {\n  const root = roots.get(element);\n  if (root) {\n    root.unmount();\n    roots.delete(element);\n  }\n}\n";
+export declare const tridentrcTemplate: (appName: string, port: number) => string;
+export declare const dtsFileTemplate: () => string;
+export declare const TSCONFIG_TEMPLATE: {
+    compilerOptions: {
+        target: string;
+        lib: string[];
+        allowJs: boolean;
+        skipLibCheck: boolean;
+        esModuleInterop: boolean;
+        allowSyntheticDefaultImports: boolean;
+        strict: boolean;
+        module: string;
+        moduleResolution: string;
+        resolveJsonModule: boolean;
+        noImplicitAny: boolean;
+        isolatedModules: boolean;
+        baseUrl: string;
+        noEmit: boolean;
+        jsx: string;
+    };
+    include: string[];
+};
+//# sourceMappingURL=mfScaffold.d.ts.map

package/dist/esm/mfScaffold.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mfScaffold.d.ts","sourceRoot":"","sources":["../../src/mfScaffold.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,gBAAgB,8uBA2B5B,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,SAAS,MAAM,EAAE,MAAM,MAAM,KAAG,MAQjE,CAAC;AAEF,eAAO,MAAM,eAAe,QAAO,MA0ClC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;CAmB7B,CAAC"}

package/dist/esm/mfScaffold.mjs

@@ -0,0 +1,107 @@
+// Shared between z2h-cli's `shadow/scaffold.ts` (long-lived per-consumer-app shadow dir) and
+// @mondaydotcomorg/z2h-dashboard-templates' `build-templates.mjs` (ephemeral per-template-build
+// shadow dir). Both scaffold a minimal Trident MF wrapper around a real app's `src/index`, so the
+// wrapper/config/type-declaration content itself has no reason to differ between the two callers
+// — only what surrounds it (package.json contents, .nvmrc, README stub) differs, because those two
+// shadow dirs have genuinely different lifecycles. See each caller's own scaffold code for that
+// caller-specific part.
+const WRAPPER_TEMPLATE = `import '@vibe/core/tokens';
+import ConsumerApp from '../../src/index';
+import React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { ErrorBoundary } from 'react-error-boundary';
+
+const roots = new Map<HTMLElement, ReactDOM.Root>();
+
+export function init() {}
+
+export function render(element: HTMLElement) {
+  const root = ReactDOM.createRoot(element);
+  root.render(
+    <ErrorBoundary fallback={<div style={{ padding: 16 }}>This app crashed.</div>}>
+      <ConsumerApp />
+    </ErrorBoundary>,
+  );
+  roots.set(element, root);
+}
+
+export function unmount({ element }: { element: HTMLElement }) {
+  const root = roots.get(element);
+  if (root) {
+    root.unmount();
+    roots.delete(element);
+  }
+}
+`;
+const tridentrcTemplate = (appName, port) => `/** @type {import("@mondaydotcomorg/trident-user-config").MicroFrontendConfig} */
+const config = {
+  appName: '${appName}',
+  port: ${port},
+};
+
+module.exports = config;
+`;
+const dtsFileTemplate = () => `
+declare module '*.module.css' {
+  const classNames: {
+    [className: string]: string;
+  };
+  export = classNames;
+}
+
+declare module '*.module.scss' {
+  const classNames: {
+    [className: string]: string;
+  };
+  export = classNames;
+}
+
+declare module '*.jpg' {
+  const e: string;
+  export default e;
+}
+declare module '*.jpeg' {
+  const e: string;
+  export default e;
+}
+declare module '*.png' {
+  const e: string;
+  export default e;
+}
+declare module '*.riv' {
+  const e: string;
+  export default e;
+}
+
+declare module '*.wasm' {
+  const e: string;
+  export default e;
+}
+
+declare module '*.html?url' {
+  const src: string;
+  export default src;
+}
+`;
+const TSCONFIG_TEMPLATE = {
+    compilerOptions: {
+        target: 'es5',
+        lib: ['dom', 'dom.iterable', 'esnext'],
+        allowJs: false,
+        skipLibCheck: true,
+        esModuleInterop: true,
+        allowSyntheticDefaultImports: true,
+        strict: false,
+        module: 'esnext',
+        moduleResolution: 'bundler',
+        resolveJsonModule: true,
+        noImplicitAny: false,
+        isolatedModules: true,
+        baseUrl: 'src',
+        noEmit: true,
+        jsx: 'react-jsx',
+    },
+    include: ['src', '../src'],
+};
+
+export { TSCONFIG_TEMPLATE, WRAPPER_TEMPLATE, dtsFileTemplate, tridentrcTemplate };

package/dist/mfScaffold.d.ts

@@ -0,0 +1,24 @@
+export declare const WRAPPER_TEMPLATE = "import '@vibe/core/tokens';\nimport ConsumerApp from '../../src/index';\nimport React from 'react';\nimport * as ReactDOM from 'react-dom/client';\nimport { ErrorBoundary } from 'react-error-boundary';\n\nconst roots = new Map<HTMLElement, ReactDOM.Root>();\n\nexport function init() {}\n\nexport function render(element: HTMLElement) {\n  const root = ReactDOM.createRoot(element);\n  root.render(\n    <ErrorBoundary fallback={<div style={{ padding: 16 }}>This app crashed.</div>}>\n      <ConsumerApp />\n    </ErrorBoundary>,\n  );\n  roots.set(element, root);\n}\n\nexport function unmount({ element }: { element: HTMLElement }) {\n  const root = roots.get(element);\n  if (root) {\n    root.unmount();\n    roots.delete(element);\n  }\n}\n";
+export declare const tridentrcTemplate: (appName: string, port: number) => string;
+export declare const dtsFileTemplate: () => string;
+export declare const TSCONFIG_TEMPLATE: {
+    compilerOptions: {
+        target: string;
+        lib: string[];
+        allowJs: boolean;
+        skipLibCheck: boolean;
+        esModuleInterop: boolean;
+        allowSyntheticDefaultImports: boolean;
+        strict: boolean;
+        module: string;
+        moduleResolution: string;
+        resolveJsonModule: boolean;
+        noImplicitAny: boolean;
+        isolatedModules: boolean;
+        baseUrl: string;
+        noEmit: boolean;
+        jsx: string;
+    };
+    include: string[];
+};
+//# sourceMappingURL=mfScaffold.d.ts.map

package/dist/mfScaffold.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mfScaffold.d.ts","sourceRoot":"","sources":["../src/mfScaffold.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,gBAAgB,8uBA2B5B,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,SAAS,MAAM,EAAE,MAAM,MAAM,KAAG,MAQjE,CAAC;AAEF,eAAO,MAAM,eAAe,QAAO,MA0ClC,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;CAmB7B,CAAC"}

package/dist/mfScaffold.js

@@ -0,0 +1,112 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+// Shared between z2h-cli's `shadow/scaffold.ts` (long-lived per-consumer-app shadow dir) and
+// @mondaydotcomorg/z2h-dashboard-templates' `build-templates.mjs` (ephemeral per-template-build
+// shadow dir). Both scaffold a minimal Trident MF wrapper around a real app's `src/index`, so the
+// wrapper/config/type-declaration content itself has no reason to differ between the two callers
+// — only what surrounds it (package.json contents, .nvmrc, README stub) differs, because those two
+// shadow dirs have genuinely different lifecycles. See each caller's own scaffold code for that
+// caller-specific part.
+const WRAPPER_TEMPLATE = `import '@vibe/core/tokens';
+import ConsumerApp from '../../src/index';
+import React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { ErrorBoundary } from 'react-error-boundary';
+
+const roots = new Map<HTMLElement, ReactDOM.Root>();
+
+export function init() {}
+
+export function render(element: HTMLElement) {
+  const root = ReactDOM.createRoot(element);
+  root.render(
+    <ErrorBoundary fallback={<div style={{ padding: 16 }}>This app crashed.</div>}>
+      <ConsumerApp />
+    </ErrorBoundary>,
+  );
+  roots.set(element, root);
+}
+
+export function unmount({ element }: { element: HTMLElement }) {
+  const root = roots.get(element);
+  if (root) {
+    root.unmount();
+    roots.delete(element);
+  }
+}
+`;
+const tridentrcTemplate = (appName, port) => `/** @type {import("@mondaydotcomorg/trident-user-config").MicroFrontendConfig} */
+const config = {
+  appName: '${appName}',
+  port: ${port},
+};
+
+module.exports = config;
+`;
+const dtsFileTemplate = () => `
+declare module '*.module.css' {
+  const classNames: {
+    [className: string]: string;
+  };
+  export = classNames;
+}
+
+declare module '*.module.scss' {
+  const classNames: {
+    [className: string]: string;
+  };
+  export = classNames;
+}
+
+declare module '*.jpg' {
+  const e: string;
+  export default e;
+}
+declare module '*.jpeg' {
+  const e: string;
+  export default e;
+}
+declare module '*.png' {
+  const e: string;
+  export default e;
+}
+declare module '*.riv' {
+  const e: string;
+  export default e;
+}
+
+declare module '*.wasm' {
+  const e: string;
+  export default e;
+}
+
+declare module '*.html?url' {
+  const src: string;
+  export default src;
+}
+`;
+const TSCONFIG_TEMPLATE = {
+    compilerOptions: {
+        target: 'es5',
+        lib: ['dom', 'dom.iterable', 'esnext'],
+        allowJs: false,
+        skipLibCheck: true,
+        esModuleInterop: true,
+        allowSyntheticDefaultImports: true,
+        strict: false,
+        module: 'esnext',
+        moduleResolution: 'bundler',
+        resolveJsonModule: true,
+        noImplicitAny: false,
+        isolatedModules: true,
+        baseUrl: 'src',
+        noEmit: true,
+        jsx: 'react-jsx',
+    },
+    include: ['src', '../src'],
+};
+
+exports.TSCONFIG_TEMPLATE = TSCONFIG_TEMPLATE;
+exports.WRAPPER_TEMPLATE = WRAPPER_TEMPLATE;
+exports.dtsFileTemplate = dtsFileTemplate;
+exports.tridentrcTemplate = tridentrcTemplate;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mondaydotcomorg/z2h-shared-utils",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -9,6 +9,11 @@
       "require": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
+    "./mf-scaffold": {
+      "import": "./dist/esm/mfScaffold.mjs",
+      "require": "./dist/mfScaffold.js",
+      "types": "./dist/mfScaffold.d.ts"
+    },
     "./package.json": "./package.json"
   },
   "nx": {

package/src/mfScaffold.ts

@@ -0,0 +1,110 @@
+// Shared between z2h-cli's `shadow/scaffold.ts` (long-lived per-consumer-app shadow dir) and
+// @mondaydotcomorg/z2h-dashboard-templates' `build-templates.mjs` (ephemeral per-template-build
+// shadow dir). Both scaffold a minimal Trident MF wrapper around a real app's `src/index`, so the
+// wrapper/config/type-declaration content itself has no reason to differ between the two callers
+// — only what surrounds it (package.json contents, .nvmrc, README stub) differs, because those two
+// shadow dirs have genuinely different lifecycles. See each caller's own scaffold code for that
+// caller-specific part.
+export const WRAPPER_TEMPLATE = `import '@vibe/core/tokens';
+import ConsumerApp from '../../src/index';
+import React from 'react';
+import * as ReactDOM from 'react-dom/client';
+import { ErrorBoundary } from 'react-error-boundary';
+
+const roots = new Map<HTMLElement, ReactDOM.Root>();
+
+export function init() {}
+
+export function render(element: HTMLElement) {
+  const root = ReactDOM.createRoot(element);
+  root.render(
+    <ErrorBoundary fallback={<div style={{ padding: 16 }}>This app crashed.</div>}>
+      <ConsumerApp />
+    </ErrorBoundary>,
+  );
+  roots.set(element, root);
+}
+
+export function unmount({ element }: { element: HTMLElement }) {
+  const root = roots.get(element);
+  if (root) {
+    root.unmount();
+    roots.delete(element);
+  }
+}
+`;
+
+export const tridentrcTemplate = (appName: string, port: number): string =>
+  `/** @type {import("@mondaydotcomorg/trident-user-config").MicroFrontendConfig} */
+const config = {
+  appName: '${appName}',
+  port: ${port},
+};
+
+module.exports = config;
+`;
+
+export const dtsFileTemplate = (): string =>
+  `
+declare module '*.module.css' {
+  const classNames: {
+    [className: string]: string;
+  };
+  export = classNames;
+}
+
+declare module '*.module.scss' {
+  const classNames: {
+    [className: string]: string;
+  };
+  export = classNames;
+}
+
+declare module '*.jpg' {
+  const e: string;
+  export default e;
+}
+declare module '*.jpeg' {
+  const e: string;
+  export default e;
+}
+declare module '*.png' {
+  const e: string;
+  export default e;
+}
+declare module '*.riv' {
+  const e: string;
+  export default e;
+}
+
+declare module '*.wasm' {
+  const e: string;
+  export default e;
+}
+
+declare module '*.html?url' {
+  const src: string;
+  export default src;
+}
+`;
+
+export const TSCONFIG_TEMPLATE = {
+  compilerOptions: {
+    target: 'es5',
+    lib: ['dom', 'dom.iterable', 'esnext'],
+    allowJs: false,
+    skipLibCheck: true,
+    esModuleInterop: true,
+    allowSyntheticDefaultImports: true,
+    strict: false,
+    module: 'esnext',
+    moduleResolution: 'bundler',
+    resolveJsonModule: true,
+    noImplicitAny: false,
+    isolatedModules: true,
+    baseUrl: 'src',
+    noEmit: true,
+    jsx: 'react-jsx',
+  },
+  include: ['src', '../src'],
+};