@linktr.ee/create-link-app 0.3.0-next.4 → 0.3.0-next.41

package/README.md

@@ -23,10 +23,12 @@ yarn create @linktr.ee/create-link-app my-link-app
 * [`create-link-app create NAME`](#create-link-app-create-name)
 * [`create-link-app deploy`](#create-link-app-deploy)
 * [`create-link-app dev`](#create-link-app-dev)
+* [`create-link-app generate-types`](#create-link-app-generate-types)
 * [`create-link-app grant-access LINK_APP_ID USERNAME`](#create-link-app-grant-access-link_app_id-username)
 * [`create-link-app help [COMMANDS]`](#create-link-app-help-commands)
 * [`create-link-app login`](#create-link-app-login)
 * [`create-link-app logout`](#create-link-app-logout)
+* [`create-link-app storybook`](#create-link-app-storybook)
 
 ## `create-link-app build`
 
@@ -106,6 +108,18 @@ EXAMPLES
   $ create-link-app dev --https
 ```
 
+## `create-link-app generate-types`
+
+Generate Typescript types from the schema definitions
+
+```
+USAGE
+  $ create-link-app generate-types
+
+DESCRIPTION
+  Generate Typescript types from the schema definitions
+```
+
 ## `create-link-app grant-access LINK_APP_ID USERNAME`
 
 Grant access to other developers to push updates for your Link App
@@ -168,4 +182,19 @@ USAGE
 DESCRIPTION
   Logout and clear browser session
 ```
+
+## `create-link-app storybook`
+
+Start the Storybook development server
+
+```
+USAGE
+  $ create-link-app storybook [-p <value>]
+
+FLAGS
+  -p, --port=<value>  [default: 6006] Port to run the Storybook server on
+
+DESCRIPTION
+  Start the Storybook development server
+```
 <!-- commandsstop -->

package/dist/commands/build.js

@@ -10,9 +10,10 @@ const webpack_config_1 = __importDefault(require("../webpack/webpack.config"));
 class Build extends base_1.default {
     async run() {
         const { flags } = await this.parse(Build);
-        (0, webpack_1.default)((0, webpack_config_1.default)('production', {
+        const config = await (0, webpack_config_1.default)('production', {
             allowAnyOrigin: flags['allow-any-origin'],
-        }), (err, stats) => {
+        });
+        (0, webpack_1.default)(config, (err, stats) => {
             if (err) {
                 this.error(err);
             }

package/dist/commands/dev.js

@@ -11,6 +11,7 @@ const webpack_config_1 = __importDefault(require("../webpack/webpack.config"));
 class Dev extends base_1.default {
     async run() {
         const { flags } = await this.parse(Dev);
+        const config = await (0, webpack_config_1.default)('development');
         const devServer = new webpack_dev_server_1.default({
             client: {
                 overlay: false,
@@ -18,7 +19,7 @@ class Dev extends base_1.default {
             hot: false,
             https: flags.https,
             port: flags.port,
-        }, (0, webpack_1.default)((0, webpack_config_1.default)('development')));
+        }, (0, webpack_1.default)(config));
         await devServer.start();
     }
 }

package/dist/commands/generate-types.js

@@ -0,0 +1,111 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const path_1 = __importDefault(require("path"));
+const base_1 = __importDefault(require("../base"));
+const child_process_1 = require("child_process");
+class MissingDependencyException extends Error {
+    constructor(packageName) {
+        super(`'${packageName}' is required on your system. Please refer to the create-link-app README`);
+    }
+}
+const ucfirst = (str) => {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+};
+class GenerateTypes extends base_1.default {
+    constructor() {
+        super(...arguments);
+        this.schemaDirPath = path_1.default.join(process.cwd(), '/schema');
+        this.tmpPath = path_1.default.join(process.cwd(), '/__temp__');
+        this.typesPath = path_1.default.join(process.cwd(), '/src/types/schema');
+    }
+    async run() {
+        try {
+            // Check for necessary deps
+            await this.dependOn('npx');
+            await this.dependOn('jtd-codegen');
+            await this.log('✓ All dependencies present');
+            // Ensure necessary directories exist
+            await this.cmd(`mkdir -p ${this.tmpPath} && touch ${this.tmpPath}/index.ts`);
+            await this.cmd(`mkdir -p ${this.typesPath} && touch ${this.typesPath}/index.ts`);
+            await this.log('✓ Files prepped for generation');
+            // Wipe existing types & drop comments
+            await this.cmd(`> ${this.typesPath}/index.ts`);
+            await this.cmd(`echo "/**" >> ${this.typesPath}/index.ts`);
+            await this.cmd(`echo " * These types were autogenerated by @linktr.ee/create-link-app" >> ${this.typesPath}/index.ts`);
+            await this.cmd(`echo " * https://www.npmjs.com/package/@linktr.ee/create-link-app " >> ${this.typesPath}/index.ts`);
+            await this.cmd(`echo " */" >> ${this.typesPath}/index.ts`);
+            // Generate and append types
+            await this.generateAndAppendSchemaType('editablePublic');
+            await this.log('✓ Generated EditablePublicData type');
+            await this.generateAndAppendSchemaType('readonlyPublic');
+            await this.log('✓ Generated ReadonlyPublicData type');
+            await this.generateAndAppendSchemaType('editablePrivate');
+            await this.log('✓ Generated EditablePrivateData type');
+            await this.generateAndAppendSchemaType('readonlyPrivate');
+            await this.log('✓ Generated ReadonlyPrivateData type');
+            // Clean up file formatting
+            await this.cmd(`npx prettier ${this.typesPath}/index.ts --write`);
+            await this.log('✓ All types created successfully');
+            // Garbage collect temporary dir
+            await this.cmd(`rm -rf ${this.tmpPath}`);
+            await this.log('✓ Cleanup complete');
+        }
+        catch (e) {
+            await this.log(`𐄂 ERROR: ${e}`);
+        }
+    }
+    /**
+     * Generates a Typescript type for the schema defined in schema/<schemaName>.jtd.json
+     * and appends that type to src/types/schema/index.ts
+     */
+    async generateAndAppendSchemaType(schemaName) {
+        // Generate schema
+        await this.cmd(`jtd-codegen ${this.schemaDirPath}/${schemaName}.jtd.json --typescript-out ${this.tmpPath} --root-name=${ucfirst(schemaName)}Data`);
+        // Strip jtd comment
+        await this.cmd(`sed '/^\\/\\//d' ${this.tmpPath}/index.ts > ${this.tmpPath}/parsed.ts`);
+        // Append to final file
+        await this.cmd(`cat ${this.tmpPath}/parsed.ts >> ${this.typesPath}/index.ts`);
+    }
+    async dependOn(dependencyName) {
+        try {
+            await this.cmd(`command -v ${dependencyName} || exit 1`);
+        }
+        catch (e) {
+            throw new MissingDependencyException('prettier');
+        }
+    }
+    /**
+     * Run a command with spawn effectively synchronously
+     */
+    async cmd(command, opts = {
+        shell: true,
+        stdio: 'ignore',
+    }, onError) {
+        await new Promise((resolve, reject) => {
+            (0, child_process_1.spawn)(command, opts)
+                .on('error', (e) => {
+                reject(e);
+            })
+                .on('exit', (code) => {
+                if (code === 1)
+                    reject({ exitCode: code });
+            })
+                .on('close', () => {
+                resolve();
+            });
+        }).catch((e) => {
+            if (onError) {
+                onError();
+            }
+            else {
+                throw e;
+            }
+        });
+        return;
+    }
+}
+exports.default = GenerateTypes;
+GenerateTypes.description = 'Generate Typescript types from the schema definitions';

package/dist/commands/storybook.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const core_1 = require("@oclif/core");
+const child_process_1 = require("child_process");
+const base_1 = __importDefault(require("../base"));
+const path_1 = __importDefault(require("path"));
+class Storybook extends base_1.default {
+    async run() {
+        const configPath = path_1.default.resolve(__dirname, '..', 'storybook');
+        const { flags } = await this.parse(Storybook);
+        const storybook = (0, child_process_1.spawn)(`start-storybook -p ${flags.port} -c ${configPath}`, { shell: true, stdio: 'inherit' });
+        storybook.on('error', (err) => {
+            throw err;
+        });
+    }
+}
+exports.default = Storybook;
+Storybook.description = 'Start the Storybook development server';
+Storybook.flags = {
+    port: core_1.Flags.integer({
+        char: 'p',
+        description: 'Port to run the Storybook server on',
+        default: 6006,
+    }),
+};

package/dist/lib/create/create-project.js

@@ -14,6 +14,9 @@ const createProject = async (template, targetDir) => {
     await fs_extra_1.default.copy(templateDir, targetDir);
     await fs_extra_1.default.copy(templateCommonDir, targetDir);
     await fs_extra_1.default.move(`${targetDir}/gitignore`, `${targetDir}/.gitignore`);
+    if (await fs_extra_1.default.existsSync(`${targetDir}/src/types/global.d.ts`)) {
+        await fs_extra_1.default.unlink(`${targetDir}/src/types/global.d.ts`);
+    }
     // update `name` field in project manifest
     const manifest = await fs_extra_1.default.readJson(`${targetDir}/manifest.json`);
     manifest.name = (0, project_name_to_title_1.default)(path_1.default.basename(targetDir));

package/dist/lib/deploy/pack-project.js

@@ -8,7 +8,13 @@ const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
 /**
  * Pack the Link App source files into `package.tgz`. This includes the following:
+ * - `schema/editablePublic.jtd.json`
+ * - `schema/readonlyPublic.jtd.json`
+ * - `schema/editablePrivate.jtd.json`
+ * - `schema/readonlyPrivate.jtd.json`
+ * - `schema/system.jtd.json`
  * - `src/`
+ * - `schema.json`
  * - `package.json`
  * - `package-lock.json` - *optional*
  * - `yarn.lock` - *optional*
@@ -30,7 +36,7 @@ async function packProject() {
             gzipOptions: { level: 9 },
         });
         archive.on('warning', (err) => {
-            if (err.code === 'ENOENT') {
+            if (err?.code === 'ENOENT') {
                 // lock files and tsconfig may or may not exist
                 const fileName = path_1.default.basename(err.path);
                 if (fileName === 'package-lock.json' || fileName === 'yarn.lock' || fileName === 'tsconfig.json') {
@@ -43,6 +49,11 @@ async function packProject() {
             handleFailure(err);
         });
         archive.pipe(outputWriteStream);
+        archive.file(resolveProjPath('schema/editablePublic.jtd.json'), { name: 'schema/editablePublic.jtd.json' });
+        archive.file(resolveProjPath('schema/readonlyPublic.jtd.json'), { name: 'schema/readonlyPublic.jtd.json' });
+        archive.file(resolveProjPath('schema/editablePrivate.jtd.json'), { name: 'schema/editablePrivate.jtd.json' });
+        archive.file(resolveProjPath('schema/readonlyPrivate.jtd.json'), { name: 'schema/readonlyPrivate.jtd.json' });
+        archive.file(resolveProjPath('schema/system.jtd.json'), { name: 'schema/system.jtd.json' });
         archive.file(resolveProjPath('package.json'), { name: 'package.json' });
         archive.file(resolveProjPath('package-lock.json'), { name: 'package-lock.json' });
         archive.file(resolveProjPath('yarn.lock'), { name: 'yarn.lock' });

package/dist/lib/schema/compile.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const fs_extra_1 = __importDefault(require("fs-extra"));
+const path_1 = __importDefault(require("path"));
+const jtd_js_1 = __importDefault(require("ajv/dist/jtd.js"));
+const index_js_1 = __importDefault(require("ajv/dist/standalone/index.js"));
+const schemaNames = ['editablePublic', 'readonlyPublic', 'editablePrivate', 'readonlyPrivate', 'system'];
+async function compileSchema() {
+    try {
+        const ajv = new jtd_js_1.default({
+            // @ts-expect-error: In JTD mode some options are not typed correctly.
+            strict: false,
+            code: { source: true, esm: true },
+        });
+        await Promise.all(schemaNames.map(async (schemaName) => {
+            const schemaPath = path_1.default.join(process.cwd(), `./schema/${schemaName}.jtd.json`);
+            const schema = await fs_extra_1.default.readJSON(schemaPath);
+            ajv.addSchema(schema, schemaName);
+        }));
+        const moduleCode = (0, index_js_1.default)(ajv);
+        return moduleCode;
+    }
+    catch (e) {
+        console.error(e);
+    }
+}
+exports.default = compileSchema;

package/dist/postcss/postcss.config.js

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPostcssConfig = void 0;
+const path_1 = __importDefault(require("path"));
+const tailwindcss_1 = __importDefault(require("tailwindcss"));
+const autoprefixer_1 = __importDefault(require("autoprefixer"));
+const componentLibraryContentPath = path_1.default.join(require.resolve('@linktr.ee/component-library/tailwind.config').split('/').slice(0, -1).join('/'), 'dist', '**', '*.js');
+const uiLinkKitPath = path_1.default.join(require.resolve('@linktr.ee/ui-link-kit').split('/').slice(0, -2).join('/'), '**', '*.js');
+function getPostcssConfig({ linkTypeSlug, env = 'production' }) {
+    const isStorybook = env === 'storybook';
+    const content = [`${process.cwd()}/src/**/*.{js,jsx,ts,tsx}`, uiLinkKitPath];
+    if (isStorybook) {
+        content.push(componentLibraryContentPath);
+    }
+    return {
+        ...(isStorybook && { inject: { insertAtTop: true } }),
+        plugins: [
+            (0, tailwindcss_1.default)({
+                important: `[data-link-type-id=${linkTypeSlug}]`,
+                content,
+                presets: [require('@linktr.ee/component-library/tailwind.config')],
+                plugins: [],
+            }),
+            (0, autoprefixer_1.default)(),
+        ],
+    };
+}
+exports.getPostcssConfig = getPostcssConfig;

package/dist/storybook/global.css

@@ -0,0 +1,53 @@
+:root {
+  --lt-color-primary: #849589;
+  --lt-color-on-primary: #ffffff;
+  --lt-color-on-primary-alpha: #ffffffb2;
+
+  --lt-color-secondary: #67776b;
+  --lt-color-on-secondary: #ffffffb3;
+
+  --lt-color-background: #3a463c;
+  --lt-color-on-background: #f7fdf9;
+
+  --lt-color0: #ffffff;
+  --lt-color1: #f7fdf9;
+  --lt-color2: #eef6ed;
+  --lt-color3: #e0ece2;
+  --lt-color4: #c9d5cb;
+  --lt-color5: #b6c5b7;
+  --lt-color6: #849589;
+  --lt-color7: #67776b;
+  --lt-color8: #4d5e52;
+  --lt-color9: #3a463c;
+  --lt-color10: #29382d;
+  --lt-color11: #151e16;
+  --lt-color12: #0b140c;
+  --lt-color13: #000501;
+  --lt-color14: #000000;
+  --lt-color15: #000000;
+
+  --lt-treetop-radius-mobile: 2.5rem;
+
+  --lt-cover-radius: 6rem;
+  --lt-cover-radius-mobile: 4rem;
+
+  --lt-feature-container-radius: 2rem;
+  --lt-feature-thumbnail-radius: 1.5rem;
+
+  --lt-carousel-container-radius: 1.5rem;
+  --lt-carousel-thumbnail-radius: 1rem;
+
+  --lt-grid-container-radius: 1.25rem;
+  --lt-grid-thumbnail-radius: 0.75rem;
+
+  --lt-stack-container-radius: 1rem;
+  --lt-stack-thumbnail-radius: 0.65rem;
+
+  --lt-font-family: INTER;
+  --lt-text-2xl: 1.5rem;
+  --lt-text-xl: 1.25rem;
+  --lt-text-lg: 1.125rem;
+  --lt-text-md: 1rem;
+  --lt-text-sm: 0.875rem;
+  --lt-text-xs: 0.75rem;
+}

package/dist/storybook/main.js

@@ -0,0 +1,53 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const postcss_1 = __importDefault(require("postcss"));
+const webpack_1 = __importDefault(require("webpack"));
+const postcss_config_1 = require("../postcss/postcss.config");
+// Do not need to be the real values, just need to be defined for storybook
+const linkTypeSlug = 'test-id';
+const linkTypeId = 'testId';
+const config = {
+    stories: [`${process.cwd()}/src/**/*.stories.@(js|jsx|ts|tsx)`],
+    addons: [
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        {
+            name: 'storybook-addon-turbo-build',
+            options: {
+                optimizationLevel: 2,
+            },
+        },
+        {
+            /**
+             * Fix Storybook issue with PostCSS@8
+             * @see https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085
+             */
+            name: '@storybook/addon-postcss',
+            options: {
+                cssLoaderOptions: { importLoaders: 1 },
+                postcssLoaderOptions: {
+                    implementation: postcss_1.default,
+                    postcssOptions: (0, postcss_config_1.getPostcssConfig)({ linkTypeSlug, env: 'storybook' }),
+                },
+            },
+        },
+    ],
+    framework: '@storybook/react',
+    core: {
+        builder: 'webpack5',
+    },
+    webpackFinal: async (config) => {
+        if (config.plugins?.length) {
+            // Add the DefinePlugin to the Webpack plugins array
+            config.plugins.push(new webpack_1.default.DefinePlugin({
+                __LINK_TYPE_ID__: JSON.stringify(linkTypeId),
+                __LINK_TYPE_SLUG__: JSON.stringify(linkTypeSlug),
+            }));
+        }
+        return config;
+    },
+};
+module.exports = config;

package/dist/storybook/preview.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.decorators = exports.parameters = void 0;
+const react_1 = __importDefault(require("react"));
+require("./global.css");
+exports.parameters = {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+        matchers: {
+            color: /(background|color)$/i,
+            date: /Date$/,
+        },
+    },
+};
+const WrapperDecorator = (storyFn) => (react_1.default.createElement("div", { style: {
+        display: 'contents',
+    }, "data-link-type-id": __LINK_TYPE_SLUG__ }, storyFn()));
+exports.decorators = [WrapperDecorator];

package/dist/webpack/webpack.config.js

@@ -13,19 +13,35 @@ const path_1 = __importDefault(require("path"));
 const webpack_1 = require("webpack");
 const camelcase_1 = __importDefault(require("camelcase"));
 const slugify_1 = __importDefault(require("slugify"));
-const tailwindcss_1 = __importDefault(require("tailwindcss"));
-const autoprefixer_1 = __importDefault(require("autoprefixer"));
+const compile_1 = __importDefault(require("../lib/schema/compile"));
+const postcss_config_1 = require("../postcss/postcss.config");
 const { ModuleFederationPlugin } = webpack_1.container;
-function default_1(env, options) {
+function toVirtualModule(code) {
+    const base64 = Buffer.from(code).toString('base64');
+    return `data:text/javascript;base64,${base64}`;
+}
+function hasEntrypoint(appDir, file) {
+    try {
+        fs_1.default.accessSync(path_1.default.resolve(appDir, 'src', file));
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+async function default_1(env, options) {
     const appDir = process.cwd();
     const entryFile = path_1.default.resolve(__dirname, `${env}.entry`);
     const htmlTemplateFile = path_1.default.resolve(__dirname, '..', '..', 'html-template', `${env}.html`);
+    const useAppEntry = hasEntrypoint(appDir, 'App.tsx');
+    const useSheetEntry = hasEntrypoint(appDir, 'Sheet.tsx');
+    const useEditorEntry = hasEntrypoint(appDir, 'Editor.tsx');
+    const appEntry = useAppEntry ? path_1.default.resolve(appDir, 'src/App') : path_1.default.resolve(appDir, 'src');
     const manifestJson = JSON.parse(fs_1.default.readFileSync(path_1.default.resolve(appDir, 'manifest.json'), 'utf8'));
     const linkTypeName = manifestJson.name.replace(/[^A-Za-z0-9 ]/g, '');
     const linkTypeSlug = (0, slugify_1.default)(linkTypeName, { lower: true });
     const linkTypeId = (0, camelcase_1.default)(linkTypeSlug, { pascalCase: true });
     const hasTsconfig = fileExists(path_1.default.resolve(appDir, 'tsconfig.json'));
-    const componentLibraryContentPath = path_1.default.join(require.resolve('@linktr.ee/component-library/tailwind.config').split('/').slice(0, -1).join('/'), 'dist', '**', '*.js');
     const config = {
         target: 'web',
         mode: env,
@@ -33,7 +49,9 @@ function default_1(env, options) {
         output: {
             publicPath: 'auto',
             path: path_1.default.resolve(appDir, 'dist'),
-            assetModuleFilename: 'images/[hash][ext][query]',
+            assetModuleFilename: 'images/[hash].[contenthash][ext][query]',
+            chunkFilename: '[id].[contenthash].js',
+            filename: '[name].[contenthash].js',
         },
         module: {
             rules: [
@@ -52,7 +70,7 @@ function default_1(env, options) {
                 },
                 {
                     test: /\.(png|jpe?g|gif|svg)$/i,
-                    type: 'asset/inline',
+                    type: 'asset/inline', // <-- this builds all images into data URLs, is that what you want?
                 },
                 {
                     test: /\.css$/,
@@ -62,33 +80,7 @@ function default_1(env, options) {
                         {
                             loader: 'postcss-loader',
                             options: {
-                                postcssOptions: {
-                                    plugins: [
-                                        (0, tailwindcss_1.default)({
-                                            content: [`${appDir}/src/**/*.{js,jsx,ts,tsx}`, componentLibraryContentPath],
-                                            important: `.ui-link-app-${linkTypeSlug}`,
-                                            presets: [require('@linktr.ee/component-library/tailwind.config')],
-                                            plugins: [],
-                                            theme: {
-                                                extend: {
-                                                    backgroundImage: {
-                                                        loading: 'linear-gradient(90deg,#f3f3f1,#fff,#f3f3f1);',
-                                                    },
-                                                    keyframes: {
-                                                        loading: {
-                                                            '75%': { transform: 'translateX(100%)' },
-                                                            '100%': { transform: 'translateX(100%)' },
-                                                        },
-                                                    },
-                                                    animation: {
-                                                        loading: 'loading 1.5s ease-in-out infinite',
-                                                    },
-                                                },
-                                            },
-                                        }),
-                                        (0, autoprefixer_1.default)(),
-                                    ],
-                                },
+                                postcssOptions: { ...(0, postcss_config_1.getPostcssConfig)({ linkTypeSlug }) },
                             },
                         },
                     ],
@@ -101,15 +93,12 @@ function default_1(env, options) {
             // TODO: The behaviour here with module resolution is confusing, can we make it more explicit?
             modules: [path_1.default.resolve(appDir, 'node_modules'), 'node_modules'],
             alias: {
-                '@linktr.ee/extension': path_1.default.resolve(appDir, 'src'),
+                '@linktr.ee/extension': appEntry,
             },
         },
         plugins: [
             new html_webpack_plugin_1.default({
                 template: htmlTemplateFile,
-                templateParameters: {
-                    tailwindBaseClass: `ui-link-app-${linkTypeSlug}`,
-                },
                 excludeChunks: [`LinkApp_${linkTypeId}`],
             }),
         ],
@@ -127,6 +116,17 @@ function default_1(env, options) {
         config.plugins.push(new mini_css_extract_plugin_1.default());
     }
     if (env === 'production') {
+        const exposedEntryPoints = {
+            // Default entry points
+            ['./App']: appEntry,
+            ['./validate']: toVirtualModule((await (0, compile_1.default)())),
+        };
+        if (useEditorEntry) {
+            exposedEntryPoints['./Editor'] = path_1.default.resolve(appDir, 'src/Editor');
+        }
+        if (useSheetEntry) {
+            exposedEntryPoints['./Sheet'] = path_1.default.resolve(appDir, 'src/Sheet');
+        }
         // TODO: Figure out how to manage externals with Module Federation
         //       Possibly make the index.html a host app, via separate webpack config
         // config.externals = {
@@ -141,6 +141,8 @@ function default_1(env, options) {
         };
         config.plugins.push(new webpack_1.DefinePlugin({
             __ALLOW_ANY_ORIGIN__: options?.allowAnyOrigin,
+            __LINK_TYPE_SLUG__: JSON.stringify(linkTypeSlug),
+            __LINK_TYPE_ID__: JSON.stringify(linkTypeId),
         }), 
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
@@ -150,9 +152,7 @@ function default_1(env, options) {
         }), new ModuleFederationPlugin({
             name: `LinkApp_${linkTypeId}`,
             filename: 'remoteEntry.js',
-            exposes: {
-                ['./App']: path_1.default.resolve(appDir, 'src'),
-            },
+            exposes: exposedEntryPoints,
             shared: {
                 react: {
                     singleton: true,

package/html-template/development.html

@@ -10,7 +10,7 @@
 </head>
 
 <body>
-  <div id="root" class="<%= tailwindBaseClass %>"></div>
+  <div id="root"></div>
 </body>
 
-</html>
+</html>

package/html-template/production.html

@@ -14,7 +14,7 @@
 </head>
 
 <body>
-  <div id="root" class="<%= tailwindBaseClass %>"></div>
+  <div id="root"></div>
 </body>
 
-</html>
+</html>