@linktr.ee/create-link-app 2.0.0-rc.1 → 2.1.0

package/README.md

@@ -29,7 +29,6 @@ npx @linktr.ee/create-link-app --help
 * [`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 [COMMAND]`](#create-link-app-help-command)
 * [`create-link-app login`](#create-link-app-login)
@@ -43,10 +42,11 @@ Build Link App project to static assets used for production
 
 ```
 USAGE
-  $ create-link-app build [--native]
+  $ create-link-app build [--native] [--profile]
 
 FLAGS
-  --native  Build native components of a Link App ready for publishing to npm
+  --native   Build native components of a Link App ready for publishing to npm
+  --profile  Enable detailed webpack profiling and bundle analysis
 
 DESCRIPTION
   Build Link App project to static assets used for production
@@ -58,16 +58,14 @@ Initialize a new Link App project
 
 ```
 USAGE
-  $ create-link-app create NAME [-t react|react-ts] [-p <value>] [--storybook]
+  $ create-link-app create NAME [-p <value>] [--storybook]
 
 ARGUMENTS
   NAME  Name of the Link App
 
 FLAGS
-  -p, --path=<value>       Path to create the project in
-  -t, --template=<option>  [default: react-ts] Template to use for the project
-                           <options: react|react-ts>
-  --storybook              With Storybook added to the project
+  -p, --path=<value>  Path to create the project in
+  --storybook         With Storybook added to the project
 
 DESCRIPTION
   Initialize a new Link App project
@@ -75,9 +73,9 @@ DESCRIPTION
 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 --storybook
 ```
 
 ## `create-link-app deploy`
@@ -122,18 +120,6 @@ 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

package/dist/commands/build.js

@@ -11,19 +11,30 @@ const child_process_1 = require("child_process");
 class Build extends base_1.default {
     async run() {
         const { flags } = await this.parse(Build);
+        const allowAnyOrigin = flags['allow-any-origin'];
+        this.log('🏗️  Starting build process...');
         if (flags['native']) {
+            this.log('📱 Building native components...');
             this.native();
         }
         else {
-            this.webpack({
-                allowAnyOrigin: flags['allow-any-origin'],
+            await this.webpack({
+                allowAnyOrigin,
+                profile: flags.profile,
             });
         }
         this.log('🎉 Build complete');
     }
     async webpack(options) {
+        this.log('⏱️  Starting webpack build...');
+        const configStartTime = Date.now();
         const config = await (0, webpack_config_1.default)('production', options);
+        const configEndTime = Date.now();
+        this.log(`📋 Webpack config generated in ${configEndTime - configStartTime}ms`);
+        const buildStartTime = Date.now();
         (0, webpack_1.default)(config, (err, stats) => {
+            const buildEndTime = Date.now();
+            const totalTime = buildEndTime - buildStartTime;
             if (err) {
                 this.error(err);
             }
@@ -33,10 +44,73 @@ class Build extends base_1.default {
             else if (stats?.hasWarnings()) {
                 this.warn(stats.toString());
             }
+            else {
+                this.log(`⚡ Webpack build completed in ${totalTime}ms`);
+                // Display detailed timing information if available
+                if (stats?.compilation?.logging) {
+                    const compilation = stats.compilation;
+                    this.log('\n📊 Build Performance Summary:');
+                    // Show module count and timing
+                    const moduleCount = compilation.modules?.size || 0;
+                    this.log(`   📦 Modules processed: ${moduleCount}`);
+                    // Show asset information
+                    const assets = Object.keys(stats.compilation.assets || {});
+                    if (assets.length > 0) {
+                        this.log(`   🗂️  Assets generated: ${assets.length}`);
+                        // Show largest assets
+                        const assetSizes = assets
+                            .map((name) => ({
+                            name,
+                            size: stats?.compilation.assets[name]?.size() || 0,
+                        }))
+                            .sort((a, b) => b.size - a.size)
+                            .slice(0, 5);
+                        this.log('   📏 Largest assets:');
+                        assetSizes.forEach((asset) => {
+                            const sizeKB = (asset.size / 1024).toFixed(1);
+                            this.log(`      ${asset.name}: ${sizeKB}KB`);
+                        });
+                    }
+                }
+                // Show timing breakdown if stats are available
+                if (stats?.toString) {
+                    const statsString = stats.toString({
+                        colors: false,
+                        modules: false,
+                        chunks: false,
+                        timings: true,
+                        performance: true,
+                    });
+                    // Extract timing information from stats
+                    const timingMatch = statsString.match(/Time: (\d+)ms/i);
+                    if (timingMatch) {
+                        this.log(`   ⏱️  Webpack internal timing: ${timingMatch[1]}ms`);
+                    }
+                }
+                // Provide guidance for further analysis
+                if (options.profile) {
+                    this.log('\n📊 Bundle analysis files generated:');
+                    this.log('   📄 Bundle report: dist/bundle-report.html');
+                    this.log('   📈 Webpack stats: dist/webpack-stats.json');
+                    this.log('   💡 Open bundle-report.html in your browser to analyze bundle size');
+                    this.log('\n🔍 Detailed profiling enabled - check webpack output above for timing breakdown');
+                }
+            }
         });
     }
     async native() {
-        (0, child_process_1.spawn)('npx react-native-builder-bob build', { cwd: process.cwd(), shell: true, stdio: 'inherit' });
+        const nativeProcess = (0, child_process_1.spawn)('npx react-native-builder-bob build', { cwd: process.cwd(), shell: true, stdio: 'inherit' });
+        nativeProcess.on('error', (err) => {
+            this.error(`❌ Failed to build native components: ${err.message}`);
+        });
+        nativeProcess.on('close', (code) => {
+            if (code === 0) {
+                this.log('✅ Native components built successfully');
+            }
+            else {
+                this.error(`❌ Native build failed with exit code ${code}`);
+            }
+        });
     }
 }
 exports.default = Build;
@@ -49,4 +123,7 @@ Build.flags = {
     native: core_1.Flags.boolean({
         description: 'Build native components of a Link App ready for publishing to npm',
     }),
+    profile: core_1.Flags.boolean({
+        description: 'Enable detailed webpack profiling and bundle analysis',
+    }),
 };

package/dist/commands/create.js

@@ -13,29 +13,31 @@ class Create extends base_1.default {
     async run() {
         const { args, flags } = await this.parse(Create);
         const targetDir = path_1.default.resolve(flags.path ?? process.cwd(), args.name);
-        this.log(`🔗 Creating project in ${targetDir}...`);
+        this.log(`🔗 Creating Link App project '${args.name}' in ${targetDir}...`);
         if (flags.storybook) {
-            this.log('  🎨 Including Storybook in the project...');
+            this.log('🎨 Including Storybook in the project...');
         }
-        await (0, create_project_1.default)(flags.template, targetDir, { hasStorybook: flags.storybook });
+        await (0, create_project_1.default)(targetDir, { hasStorybook: flags.storybook });
         const useYarn = (0, is_using_yarn_1.default)();
-        core_1.CliUx.ux.action.start('  🚚 Installing dependencies');
+        core_1.CliUx.ux.action.start('🚚 Installing dependencies');
         (0, install_dependencies_1.default)(targetDir, useYarn);
         core_1.CliUx.ux.action.stop();
         const relativeProjectPath = path_1.default.relative(process.cwd(), targetDir);
-        this.log('\n✅ Project created, to get started:');
+        this.log('✅ Project created successfully!');
+        this.log('\n🚀 To get started:');
         this.log(`    cd ${relativeProjectPath}`);
         this.log(`    yarn install | npm install`);
         this.log(`    yarn build   | npm run build`);
-        this.log(`    yarn dev     | npm run dev\n`);
+        this.log(`    yarn dev     | npm run dev`);
+        this.log('\n🎉 Happy coding!');
     }
 }
 exports.default = Create;
 Create.description = 'Initialize a new Link App project';
 Create.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 --storybook',
 ];
 Create.args = [
     {
@@ -45,12 +47,6 @@ Create.args = [
     },
 ];
 Create.flags = {
-    template: core_1.Flags.string({
-        char: 't',
-        description: 'Template to use for the project',
-        options: ['react', 'react-ts'],
-        default: 'react-ts',
-    }),
     path: core_1.Flags.string({
         char: 'p',
         description: 'Path to create the project in',

package/dist/commands/deploy.js

@@ -23,30 +23,31 @@ class Deploy extends base_1.default {
         const isForceUpdate = !!flags['force-update'];
         const isQa = !!flags.qa;
         if (isForceUpdate) {
-            this.log('⚠️  "--force-update" flag will impact the existing PUBLISHED Link Apps.\n');
+            this.log('⚠️  "--force-update" flag will impact the existing PUBLISHED Link Apps.');
         }
-        this.log(`📦 Packing project...\n`);
+        this.log('🚀 Starting deployment process...');
+        this.log('📦 Packing project...');
         const packedFiles = await (0, pack_project_1.default)(flags.path);
         const linkAppName = this.getLinkAppId(flags.path);
         const linkAppId = (0, slugify_1.default)(linkAppName, { lower: true });
-        this.log(`🔍 Checking Link App by ID: [${linkAppId}] ...\n`);
+        this.log(`🔍 Checking Link App by ID: [${linkAppId}]...`);
         const linkAppExists = await (0, check_link_app_exists_1.default)(linkTypeServiceUrl, linkAppId, accessToken);
         if (linkAppExists) {
-            this.log(`   Link App [${linkAppId}] already exists, updating it...`);
+            this.log(`✅ Link App [${linkAppId}] already exists, updating it...`);
         }
         else {
-            this.log(`   Link App [${linkAppId}] does not exist, creating it...`);
+            this.log(`🆕 Link App [${linkAppId}] does not exist, creating it...`);
         }
         if (packedFiles?.length) {
-            this.log('   Ready to upload the following files:');
+            this.log('📋 Ready to upload the following files:');
             packedFiles.forEach((file) => {
-                this.log(`    - ${file}`);
+                this.log(`   📄 ${file}`);
             });
         }
         if (!flags['skip-confirm']) {
             const userConfirmDeploy = await core_1.CliUx.ux.prompt(`❓ ${isQa ? '[QA]' : ''} Do you want to proceed? (Y/n)`, { required: false });
             if (userConfirmDeploy?.toLowerCase() !== 'y') {
-                this.log('Aborted!');
+                this.log('❌ Deployment aborted!');
                 return;
             }
         }
@@ -69,7 +70,7 @@ class Deploy extends base_1.default {
         }
     }
     async processSuccess(flags, result) {
-        this.log(`\n--------------------------------`);
+        this.log('\n📊 Deployment Response:');
         this.log(JSON.stringify(result, null, 2));
         const linkTypeId = result.linkType.linkTypeId;
         const buildId = result.build?.id;
@@ -79,15 +80,15 @@ class Deploy extends base_1.default {
         const linkAppCreateUrl = flags.qa
             ? `https://qa.linktr.ee/admin?action=create-link&linkType=${linkTypeId}`
             : `https://linktr.ee/admin?action=create-link&linkType=${linkTypeId}`;
-        this.log(`\n--------------------------------`);
+        this.log('\n🎉 Deployment Summary:');
         this.log(`✅ Link App successfully ${flags.update ? 'updated' : 'uploaded'}`);
-        this.log(`   - Link App ID: ${linkTypeId}`);
-        this.log(`   - Status: ${result.linkType.status}`);
-        this.log(`   - Updated: ${new Date(result.linkType.updated_timestamp * 1000).toLocaleString()}`);
+        this.log(`🆔 Link App ID: ${linkTypeId}`);
+        this.log(`📊 Status: ${result.linkType.status}`);
+        this.log(`🕒 Updated: ${new Date(result.linkType.updated_timestamp * 1000).toLocaleString()}`);
         if (buildId) {
-            this.log(`   - Check Link App build: ${linkAppBuildUrl}`);
+            this.log(`🔗 Check Link App build: ${linkAppBuildUrl}`);
         }
-        this.log(`   - Create Link App: ${linkAppCreateUrl}`);
+        this.log(`🚀 Create Link App: ${linkAppCreateUrl}`);
     }
     getLinkAppId(givenPath) {
         const manifestPath = path_1.default.resolve(givenPath ?? process.cwd(), 'manifest.json');

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);
+        this.log('🚀 Starting development server...');
         const config = await (0, webpack_config_1.default)('development');
         const devServer = new webpack_dev_server_1.default({
             client: {
@@ -22,7 +23,9 @@ class Dev extends base_1.default {
             port: flags.port,
             allowedHosts: flags.allowedHosts,
         }, (0, webpack_1.default)(config));
+        this.log(`📡 Development server will start on ${flags.https ? 'https' : 'http'}://${flags.host}:${flags.port}`);
         await devServer.start();
+        this.log('✅ Development server started successfully');
     }
 }
 exports.default = Dev;

package/dist/commands/grant-access.js

@@ -10,6 +10,7 @@ const access_token_1 = require("../lib/auth/access-token");
 class GrantAccess extends base_1.default {
     async run() {
         const { args, flags } = await this.parse(GrantAccess);
+        this.log(`🔐 Granting access to Link App '${args.link_app_id}' for user '${args.username}'...`);
         const appConfig = await this.getAppConfig(flags.qa ? 'qa' : 'production');
         const accessToken = (0, access_token_1.getAccessToken)(appConfig.auth.audience);
         const url = `${flags.endpoint ?? appConfig.link_types_url}/link-types/${args.link_app_id}/maintainers`;
@@ -23,10 +24,10 @@ class GrantAccess extends base_1.default {
         };
         try {
             await axios_1.default.post(url, maintainerDto, { headers });
-            this.log(`Successfully granted maintainer access to user '${args.username}'\n`);
+            this.log(`✅ Successfully granted maintainer access to user '${args.username}'`);
         }
         catch (err) {
-            this.log('There was an error while attempting to grant access to user\n');
+            this.log(`❌ There was an error while attempting to grant access to user '${args.username}'`);
             if (axios_1.default.isAxiosError(err)) {
                 if (err.response) {
                     this.error(JSON.stringify(err.response.data, null, 2));

package/dist/commands/login.js

@@ -10,25 +10,26 @@ const device_auth_1 = require("../lib/auth/device-auth");
 class Login extends base_1.default {
     async run() {
         const { flags } = await this.parse(Login);
+        this.log('🔐 Initiating login with Linktree credentials...');
         const appConfig = await this.getAppConfig(flags.qa ? 'qa' : 'production');
         const handle = await (0, device_auth_1.initDeviceAuthorization)(appConfig.auth);
         const { expires_in, user_code, verification_uri_complete } = handle;
         const expiryTime = expires_in % 60 === 0 ? `${expires_in / 60} minutes` : `${expires_in} seconds`;
-        this.log(`Please login via the opened web browser link. The browser window should display the following code: ${user_code}`);
-        this.log(`If browser does not open automatically, please go to the following link: ${verification_uri_complete}`);
-        this.log(`This link expires in ${expiryTime}. Press Ctrl-C to abort.\n`);
+        this.log(`🌐 Please login via the opened web browser link. The browser window should display the following code: ${user_code}`);
+        this.log(`🔗 If browser does not open automatically, please go to the following link: ${verification_uri_complete}`);
+        this.log(`⏰ This link expires in ${expiryTime}. Press Ctrl-C to abort.`);
         core_1.CliUx.ux.open(verification_uri_complete);
-        core_1.CliUx.ux.action.start('Waiting for user to authorize device from browser');
+        core_1.CliUx.ux.action.start('⏳ Waiting for user to authorize device from browser');
         const token = await (0, device_auth_1.pollAccessToken)(handle);
         core_1.CliUx.ux.action.stop();
         if ((0, access_token_1.isTokenValid)(token)) {
             (0, access_token_1.saveAccessToken)(token.access_token);
             if (flags.qa) {
-                this.log('TOKEN: ', token.access_token);
+                this.log('🔑 TOKEN: ', token.access_token);
             }
-            this.log('\nDevice has been authorized. Login successful.');
+            this.log('✅ Device has been authorized. Login successful.');
             if (token.expires_at) {
-                this.log(`Login will expire at ${new Date(token.expires_at * 1000).toString()}\n`);
+                this.log(`⏰ Login will expire at ${new Date(token.expires_at * 1000).toString()}`);
             }
         }
     }

package/dist/commands/logout.js

@@ -9,6 +9,7 @@ const access_token_1 = require("../lib/auth/access-token");
 class Logout extends base_1.default {
     async run() {
         const { flags } = await this.parse(Logout);
+        this.log('🔓 Logging out and clearing browser session...');
         const appConfig = await this.getAppConfig(flags.qa ? 'qa' : 'production');
         const { auth, logout_redirect_url } = appConfig;
         const { domain, client_id, audience } = auth;
@@ -16,8 +17,8 @@ class Logout extends base_1.default {
         // clear Auth0 session cookies so user gets prompted to enter credentials again for next login
         const url = `${domain}/v2/logout?client_id=${client_id}&returnTo=${logout_redirect_url}`;
         core_1.CliUx.ux.open(url);
-        this.log('Logout successful.');
-        this.log(`If browser did not open automatically, please go to the following link to logout from the browser: ${url}`);
+        this.log('✅ Logout successful.');
+        this.log(`🌐 If browser did not open automatically, please go to the following link to logout from the browser: ${url}`);
     }
 }
 exports.default = Logout;

package/dist/commands/storybook.js

@@ -11,10 +11,12 @@ class Storybook extends base_1.default {
     async run() {
         const configPath = path_1.default.resolve(__dirname, '..', 'storybook');
         const { flags } = await this.parse(Storybook);
+        this.log(`📚 Starting Storybook development server on port ${flags.port}...`);
         const storybook = (0, child_process_1.spawn)(`start-storybook -p ${flags.port} -c ${configPath}`, { shell: true, stdio: 'inherit' });
         storybook.on('error', (err) => {
-            throw err;
+            this.error(`❌ Failed to start Storybook: ${err.message}`);
         });
+        this.log('✅ Storybook server started successfully');
     }
 }
 exports.default = Storybook;

package/dist/commands/test-url-match-rules.js

@@ -12,6 +12,7 @@ const test_url_match_rules_1 = __importDefault(require("../lib/deploy/test-url-m
 class TestUrlMatchRules extends base_1.default {
     async run() {
         const { args, flags } = await this.parse(TestUrlMatchRules);
+        this.log(`🧪 Testing URL match rules for: ${args.url}`);
         const appConfig = await this.getAppConfig(flags.qa ? 'qa' : 'production');
         const linkTypeServiceUrl = `${flags.endpoint ?? appConfig.link_types_url}/link-types`;
         const accessToken = (0, access_token_1.getAccessToken)(appConfig.auth.audience);
@@ -24,6 +25,7 @@ class TestUrlMatchRules extends base_1.default {
         if (!fs_1.default.existsSync(urlMatchRulesPath)) {
             this.error('❌ url_match_rules.json not found', { exit: 1 });
         }
+        this.log('📋 Loading URL match rules from url_match_rules.json...');
         const urlMatchRulesString = fs_1.default.readFileSync(urlMatchRulesPath, 'utf8');
         if (!urlMatchRulesString) {
             this.error('❌ url_match_rules.json is empty');
@@ -31,11 +33,13 @@ class TestUrlMatchRules extends base_1.default {
         let urlMatchRules = null;
         try {
             urlMatchRules = JSON.parse(urlMatchRulesString);
+            this.log('✅ URL match rules loaded successfully');
         }
         catch (error) {
             this.error('❌ url_match_rules.json is invalid');
         }
         try {
+            this.log('🔍 Testing URL against match rules...');
             const result = await (0, test_url_match_rules_1.default)(linkTypeServiceUrl, url, urlMatchRules, accessToken);
             const success = result.success;
             this.log(`${success ? '🎉' : '❌'} Test URL Match Rules Result:`);

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

@@ -8,8 +8,8 @@ const path_1 = __importDefault(require("path"));
 const project_name_to_title_1 = __importDefault(require("./project-name-to-title"));
 // templates path relative to this module
 const BaseTemplatesDir = path_1.default.resolve(__dirname, '..', '..', '..', 'templates');
-const createProject = async (template, targetDir, options) => {
-    const templateDir = path_1.default.resolve(BaseTemplatesDir, template);
+const createProject = async (targetDir, options) => {
+    const templateDir = path_1.default.resolve(BaseTemplatesDir, 'react-ts');
     const templateCommonDir = path_1.default.resolve(BaseTemplatesDir, 'common');
     await fs_extra_1.default.copy(templateDir, targetDir);
     await fs_extra_1.default.copy(templateCommonDir, targetDir);

package/dist/webpack/development.entry.js

@@ -28,64 +28,33 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const client_1 = require("react-dom/client");
-const simulator_1 = __importDefault(require("./simulator"));
 const extension_1 = __importDefault(require("@linktr.ee/extension"));
 const extension_dev_data_1 = __importDefault(require("@linktr.ee/extension-dev-data"));
 const container = document.getElementById('root');
 const root = (0, client_1.createRoot)(container);
-function EmbeddedExtension() {
-    const wrapperRef = (0, react_1.useRef)(null);
-    const [extensionData, setExtensionData] = (0, react_1.useState)(extension_dev_data_1.default);
+const App = () => {
+    // TODO: refactor common postMessage to parent in both entry points
     (0, react_1.useEffect)(() => {
-        const postReady = (height) => {
-            const ready = { type: 'extension-ready', data: { ready: true, height } };
-            window.parent.postMessage(ready, '*');
-        };
-        // signal loaded first, then report initial size
-        const loaded = { type: 'extension-loaded', data: { loaded: true } };
-        window.parent.postMessage(loaded, '*');
-        const initialHeight = Math.ceil(wrapperRef.current?.getBoundingClientRect().height || document.documentElement.scrollHeight || container.clientHeight);
-        postReady(initialHeight);
-        const ro = new window.ResizeObserver((entries) => {
-            const entry = entries[0];
-            const h = Math.ceil(entry?.contentRect?.height || wrapperRef.current?.getBoundingClientRect().height || 0);
-            if (h)
-                postReady(h);
-        });
-        if (wrapperRef.current)
-            ro.observe(wrapperRef.current);
-        const onMessage = (event) => {
-            if (event.data?.type === 'extension-data') {
-                const data = event.data?.data || {};
-                // eslint-disable-next-line no-console
-                console.info('[Extension] received extension-data', data);
-                setExtensionData((prev) => ({ ...prev, ...data }));
-            }
-        };
-        // forward interaction events to the parent (parity with production)
-        const onInteraction = (event) => window.parent.postMessage({ type: 'interaction-event', data: event.detail }, '*');
-        document.addEventListener('interaction-event', onInteraction);
-        window.addEventListener('message', onMessage);
-        return () => {
-            if (wrapperRef.current) {
-                try {
-                    ro.unobserve(wrapperRef.current);
-                }
-                catch (e) {
-                    // ignore unobserve errors in dev simulator
-                }
-            }
-            document.removeEventListener('interaction-event', onInteraction);
-            window.removeEventListener('message', onMessage);
+        const message = {
+            type: 'extension-ready',
+            data: {
+                ready: true,
+                height: container.clientHeight,
+            },
         };
+        window.parent.postMessage(message, '*');
     }, []);
-    return (react_1.default.createElement("div", { ref: wrapperRef, style: { display: 'block' } },
-        react_1.default.createElement(extension_1.default, { ...extensionData })));
-}
-const App = () => {
     if (window.location.search === '?embed') {
-        return react_1.default.createElement(EmbeddedExtension, null);
+        return react_1.default.createElement(extension_1.default, { ...extension_dev_data_1.default });
+    }
+    else {
+        return (react_1.default.createElement("iframe", { src: `${window.location}?embed`, sandbox: ['allow-scripts', 'allow-same-origin', 'allow-popups', 'allow-popups-to-escape-sandbox', 'allow-forms'].join(' '), scrolling: "no", frameBorder: 0, style: {
+                display: 'block',
+                margin: '0 auto',
+                width: '1px',
+                minWidth: '680px',
+                height: '100vh',
+            } }));
     }
-    return react_1.default.createElement(simulator_1.default, null);
 };
 root.render(react_1.default.createElement(App, null));