@linktr.ee/create-link-app 2.0.0 → 2.2.0

package/dist/webpack/webpack.config.js

@@ -1,5 +1,4 @@
 "use strict";
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -46,17 +45,46 @@ async function default_1(env, options) {
     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'));
+    // Check if we should enable profiling and analysis
+    const enableProfiling = options?.profile || false;
     const config = {
         target: 'web',
         mode: env,
         entry: entryFile,
+        // Enable webpack persistent caching for faster subsequent builds
+        cache: env === 'production'
+            ? {
+                type: 'filesystem',
+                buildDependencies: {
+                    config: [__filename],
+                },
+            }
+            : undefined,
         output: {
             publicPath: 'auto',
             path: path_1.default.resolve(appDir, 'dist'),
             assetModuleFilename: 'images/[hash].[contenthash][ext][query]',
             chunkFilename: '[id].[contenthash].js',
             filename: '[name].[contenthash].js',
+            // Clean dist folder before each build
+            clean: true,
         },
+        // Enable profiling for production builds when requested
+        ...(enableProfiling && {
+            profile: true,
+            stats: {
+                timings: true,
+                modules: true,
+                moduleTrace: true,
+                reasons: true,
+                usedExports: true,
+                providedExports: true,
+                optimizationBailout: true,
+                errorDetails: true,
+                logging: 'verbose',
+                loggingTrace: true,
+            },
+        }),
         module: {
             rules: [
                 {
@@ -70,11 +98,19 @@ async function default_1(env, options) {
                             [require.resolve('@babel/preset-react'), { runtime: 'automatic' }],
                         ],
                         plugins: [require.resolve('@babel/plugin-transform-runtime')],
+                        // Enable caching for faster rebuilds
+                        cacheDirectory: true,
+                        cacheCompression: false, // Don't compress cache files for faster access
                     },
                 },
                 {
                     test: /\.(png|jpe?g|gif|svg)$/i,
-                    type: 'asset/inline', // <-- this builds all images into data URLs, is that what you want?
+                    type: 'asset',
+                    parser: {
+                        dataUrlCondition: {
+                            maxSize: 8 * 1024, // Only inline images smaller than 8KB
+                        },
+                    },
                 },
                 {
                     test: /\.css$/,
@@ -111,19 +147,36 @@ async function default_1(env, options) {
             new html_webpack_plugin_1.default({
                 template: htmlTemplateFile,
                 excludeChunks: [`LinkApp_${linkTypeId}`],
+                templateParameters: {
+                    linkTypeSlug: linkTypeSlug,
+                },
+            }),
+            // Add progress plugin for better build feedback
+            new webpack_1.ProgressPlugin({
+                activeModules: true,
+                entries: true,
+                modules: true,
+                modulesCount: 5000,
+                profile: enableProfiling,
+                dependencies: true,
+                dependenciesCount: 10000,
+                percentBy: 'entries',
             }),
         ],
     };
     // Type checking on a separate process - @babel/preset-typescript only handles transpilation
     if (hasTsconfig) {
+        config.plugins = config.plugins || [];
         config.plugins.push(new fork_ts_checker_webpack_plugin_1.default());
     }
     if (env === 'development') {
         config.devtool = 'cheap-module-source-map';
+        config.resolve = config.resolve || {};
         config.resolve.alias = {
             ...config.resolve.alias,
             '@linktr.ee/extension-dev-data': path_1.default.resolve(appDir, 'fixtures', 'props-data.json'),
         };
+        config.plugins = config.plugins || [];
         config.plugins.push(new mini_css_extract_plugin_1.default({
             filename: '[name].[contenthash].css',
             chunkFilename: '[id].[contenthash].css',
@@ -142,6 +195,91 @@ async function default_1(env, options) {
         if (useSheetEntry) {
             exposedEntryPoints['./Sheet'] = path_1.default.resolve(appDir, 'src/Sheet');
         }
+        // Add bundle analyzer if requested
+        if (enableProfiling) {
+            try {
+                // Dynamically import webpack-bundle-analyzer to avoid requiring it as a hard dependency
+                // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-explicit-any
+                const bundleAnalyzer = require('webpack-bundle-analyzer');
+                const BundleAnalyzerPlugin = bundleAnalyzer.BundleAnalyzerPlugin;
+                config.plugins?.push(new BundleAnalyzerPlugin({
+                    analyzerMode: 'static',
+                    reportFilename: path_1.default.resolve(appDir, 'dist', 'bundle-report.html'),
+                    openAnalyzer: false,
+                    generateStatsFile: true,
+                    statsFilename: path_1.default.resolve(appDir, 'dist', 'webpack-stats.json'),
+                }));
+            }
+            catch (error) {
+                console.warn('⚠️  webpack-bundle-analyzer not installed. Run: npm install --save-dev webpack-bundle-analyzer');
+                console.warn('   Bundle analysis will be skipped.');
+            }
+        }
+        // Optimize build performance and bundle splitting
+        config.optimization = {
+            minimize: true,
+            minimizer: [
+                // Configure TerserPlugin for better performance
+                '...',
+                // eslint-disable-next-line @typescript-eslint/no-var-requires
+                new (require('terser-webpack-plugin'))({
+                    parallel: true,
+                    terserOptions: {
+                        compress: {
+                            // Reduce compression passes for faster builds
+                            passes: 1,
+                            drop_console: true,
+                            drop_debugger: true,
+                        },
+                        mangle: {
+                            safari10: true, // Fix Safari 10+ bug
+                        },
+                        format: {
+                            comments: false, // Remove all comments
+                        },
+                    },
+                    extractComments: false, // Don't create separate LICENSE files
+                }),
+            ],
+            splitChunks: {
+                chunks: 'all',
+                cacheGroups: {
+                    // Separate vendor libraries for better caching
+                    vendor: {
+                        test: /[\\/]node_modules[\\/]/,
+                        name: 'vendors',
+                        chunks: 'all',
+                        priority: 10,
+                    },
+                    // Separate large UI library
+                    uiKit: {
+                        test: /[\\/]node_modules[\\/]@linktr\.ee[\\/]ui-link-kit[\\/]/,
+                        name: 'ui-kit',
+                        chunks: 'all',
+                        priority: 20,
+                    },
+                    // Separate icon libraries
+                    icons: {
+                        test: /[\\/]node_modules[\\/].*icons.*[\\/]/,
+                        name: 'icons',
+                        chunks: 'all',
+                        priority: 15,
+                    },
+                    // Common code shared between chunks
+                    common: {
+                        name: 'common',
+                        minChunks: 2,
+                        chunks: 'all',
+                        priority: 5,
+                        reuseExistingChunk: true,
+                    },
+                },
+            },
+            // Enable runtime chunk for better caching
+            runtimeChunk: {
+                name: 'runtime',
+            },
+        };
         // TODO: Figure out how to manage externals with Module Federation
         //       Possibly make the index.html a host app, via separate webpack config
         // config.externals = {
@@ -154,7 +292,7 @@ async function default_1(env, options) {
             maxAssetSize: 350000,
             hints: 'warning',
         };
-        config.plugins.push(new webpack_1.DefinePlugin({
+        config.plugins?.push(new webpack_1.DefinePlugin({
             __ALLOW_ANY_ORIGIN__: options?.allowAnyOrigin,
             __LINK_TYPE_SLUG__: JSON.stringify(linkTypeSlug),
             __LINK_TYPE_ID__: JSON.stringify(linkTypeId),

package/html-template/development.html

@@ -10,7 +10,7 @@
 </head>
 
 <body>
-  <div id="root"></div>
+  <div id="root" data-link-type-id="<%= linkTypeSlug %>"></div>
 </body>
 
-</html>
+</html>

package/html-template/production.html

@@ -14,7 +14,7 @@
 </head>
 
 <body>
-  <div id="root"></div>
+  <div id="root" data-link-type-id="<%= linkTypeSlug %>"></div>
 </body>
 
-</html>
+</html>

package/oclif.manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.0",
+  "version": "2.2.0",
   "commands": {
     "build": {
       "id": "build",
@@ -23,6 +23,12 @@
           "type": "boolean",
           "description": "Build native components of a Link App ready for publishing to npm",
           "allowNo": false
+        },
+        "profile": {
+          "name": "profile",
+          "type": "boolean",
+          "description": "Enable detailed webpack profiling and bundle analysis",
+          "allowNo": false
         }
       },
       "args": {}
@@ -38,22 +44,10 @@
       "hiddenAliases": [],
       "examples": [
         "$ create-link-app create my-link-app",
-        "$ create-link-app create my-link-app --template react",
-        "$ create-link-app create my-link-app --path my/custom/path"
+        "$ create-link-app create my-link-app --path my/custom/path",
+        "$ create-link-app create my-link-app --storybook"
       ],
       "flags": {
-        "template": {
-          "name": "template",
-          "type": "option",
-          "char": "t",
-          "description": "Template to use for the project",
-          "multiple": false,
-          "options": [
-            "react",
-            "react-ts"
-          ],
-          "default": "react-ts"
-        },
         "path": {
           "name": "path",
           "type": "option",
@@ -176,18 +170,6 @@
       },
       "args": {}
     },
-    "generate-types": {
-      "id": "generate-types",
-      "description": "Generate Typescript types from the schema definitions",
-      "strict": true,
-      "pluginName": "@linktr.ee/create-link-app",
-      "pluginAlias": "@linktr.ee/create-link-app",
-      "pluginType": "core",
-      "aliases": [],
-      "hiddenAliases": [],
-      "flags": {},
-      "args": {}
-    },
     "grant-access": {
       "id": "grant-access",
       "description": "Grant access to other developers to push updates for your Link App",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/create-link-app",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "description": "Create a Link App on Linktr.ee.",
   "license": "UNLICENSED",
   "author": "Linktree",
@@ -76,6 +76,7 @@
     "style-loader": "^3.3.2",
     "styled-components": "^5.3.5",
     "tailwindcss": "^3.3.2",
+    "terser-webpack-plugin": "^5.3.10",
     "ts-loader": "^9.4.4",
     "typescript": "^4.7.3",
     "webpack": "^5.75.0",

package/templates/common/url_match_rules.json

@@ -0,0 +1,10 @@
+{
+  "hostnames": [
+    "linktr.ee"
+  ],
+  "patterns": [
+    {
+      "pathname": "/*"
+    }
+  ]
+}

package/templates/react-ts/package.json

@@ -4,7 +4,7 @@
     "build": "create-link-app build",
     "login-app": "create-link-app login",
     "logout-app": "create-link-app logout",
-    "upload": "create-link-app deploy",
+    "deploy": "create-link-app deploy",
     "dev": "create-link-app dev",
     "prepack": "create-link-app build --native",
     "test-url-match-rules": "create-link-app test-url-match-rules"

package/templates/react-ts/postcss.config.js

@@ -2,5 +2,5 @@ module.exports = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
-  }
-}
+  },
+}

package/templates/react-ts/tailwind.config.js

@@ -1,8 +1,8 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./src/**/*.{js,jsx,ts,tsx}"],
+  content: ['./src/**/*.{js,jsx,ts,tsx}'],
   theme: {
     extend: {},
   },
   plugins: [],
-};
+}

package/dist/commands/generate-types.js

@@ -1,102 +0,0 @@
-"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`);
-            // 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';