@youcan/app 2.1.4 → 2.3.0

package/dist/cli/commands/app/dev.d.ts

@@ -1,6 +1,13 @@
-import { AppCommand } from '@/util/theme-command';
-declare class Dev extends AppCommand {
-    static description: string;
-    run(): Promise<any>;
-}
-export default Dev;
+import { AppCommand } from '@/util/app-command';
+declare class Dev extends AppCommand {
+    static description: string;
+    private readonly hotKeys;
+    run(): Promise<any>;
+    private prepareNetworkOptions;
+    reloadWorkers(): Promise<void>;
+    private runWorkers;
+    private prepareDevProcesses;
+    private buildEnvironmentVariables;
+    private openAppPreview;
+}
+export default Dev;

package/dist/cli/commands/app/dev.js

@@ -1,56 +1,94 @@
-import { Session, Tasks, Env, Http, Filesystem, Path } from '@youcan/cli-kit';
-import { AppCommand } from '../../../util/theme-command.js';
+import { Session, Tasks, UI, System, Services, Env, Http } from '@youcan/cli-kit';
+import { bootTunnelWorker, bootAppWorker, bootWebWorker, bootExtensionWorker } from '../../services/dev/workers/index.js';
+import { AppCommand } from '../../../util/app-command.js';
 import { load } from '../../../util/app-loader.js';
-import { APP_CONFIG_FILENAME } from '../../../constants.js';
-import { bootAppWorker, bootWebWorker, bootExtensionWorker } from '../../services/dev/workers/index.js';
 
-class Dev extends AppCommand {
-    static description = 'Run the app in dev mode';
-    async run() {
-        const app = await load();
-        const session = await Session.authenticate(this);
-        const { workers } = await Tasks.run({ cmd: this, workers: [] }, [
-            {
-                title: 'Syncing app configuration..',
-                async task() {
-                    const endpoint = app.config.id == null
-                        ? `${Env.apiHostname()}/apps/create`
-                        : `${Env.apiHostname()}/apps/${app.config.id}/update`;
-                    const res = await Http.post(endpoint, {
-                        headers: { Authorization: `Bearer ${session.access_token}` },
-                        body: JSON.stringify({
-                            name: app.config.name,
-                            app_url: app.config.app_url,
-                            redirect_urls: app.config.redirect_urls,
-                        }),
-                    });
-                    app.config = {
-                        name: res.name,
-                        id: res.id,
-                        app_url: res.app_url,
-                        redirect_urls: res.redirect_urls,
-                        oauth: {
-                            scopes: res.scopes,
-                            client_id: res.client_id,
-                        },
-                    };
-                    await Filesystem.writeJsonFile(Path.join(app.root, APP_CONFIG_FILENAME), app.config);
-                },
-            },
-            {
-                title: 'Preparing dev processes...',
-                async task(ctx) {
-                    const promises = [
-                        bootAppWorker(ctx.cmd, app),
-                    ];
-                    app.webs.forEach(web => promises.unshift(bootWebWorker(ctx.cmd, app, web)));
-                    app.extensions.forEach(ext => promises.unshift(bootExtensionWorker(ctx.cmd, app, ext)));
-                    ctx.workers = await Promise.all(promises);
-                },
-            },
-        ]);
-        await Promise.all(workers.map(async (worker) => await worker.run()));
-    }
+class Dev extends AppCommand {
+    static description = 'Run the app in dev mode';
+    hotKeys = [
+        {
+            keyboardKey: 'p',
+            description: 'preview in your dev store',
+            handler: async () => this.openAppPreview(),
+        },
+        {
+            keyboardKey: 'q',
+            description: 'quit',
+            handler: () => this.exit(0),
+        },
+    ];
+    async run() {
+        this.session = await Session.authenticate(this);
+        this.app = await load();
+        const { workers } = await Tasks.run({ cmd: this, workers: [] }, [
+            {
+                title: 'Preparing network options...',
+                task: async (ctx) => {
+                    ctx.workers.push(await this.prepareNetworkOptions());
+                },
+            },
+            {
+                title: 'Syncing app configuration...',
+                task: async () => { await this.syncAppConfig(); },
+            },
+            {
+                title: 'Preparing dev processes...',
+                task: async (ctx) => {
+                    ctx.workers.push(...await this.prepareDevProcesses());
+                },
+            },
+        ]);
+        UI.renderDevOutput({ hotKeys: this.hotKeys, cmd: this });
+        this.runWorkers(workers);
+    }
+    async prepareNetworkOptions() {
+        const port = await System.getNextAvailablePort(3000);
+        // Start by `localhost` until a tunneled url is available
+        const appUrl = `http://localhost:${port}`;
+        this.app.networkConfig = { port, appUrl };
+        const worker = await bootTunnelWorker(this, this.app, new Services.Cloudflared());
+        return worker;
+    }
+    async reloadWorkers() {
+        this.controller = new AbortController();
+        // Preserve network config.
+        const networkConfig = this.app.networkConfig;
+        this.app = await load();
+        this.app.networkConfig = networkConfig;
+        await this.syncAppConfig();
+        await this.runWorkers(await this.prepareDevProcesses());
+    }
+    async runWorkers(workers) {
+        await Promise.all(workers.map(worker => worker.run())).catch((_) => { });
+    }
+    async prepareDevProcesses() {
+        const promises = [
+            bootAppWorker(this, this.app),
+        ];
+        this.app.webs.forEach(web => promises.unshift(bootWebWorker(this, this.app, web, this.buildEnvironmentVariables())));
+        this.app.extensions.forEach(ext => promises.unshift(bootExtensionWorker(this, this.app, ext)));
+        return Promise.all(promises);
+    }
+    buildEnvironmentVariables() {
+        if (!this.app.remoteConfig) {
+            throw new Error('remote app config not loaded');
+        }
+        if (!this.app.networkConfig) {
+            throw new Error('app network config is not set');
+        }
+        return {
+            YOUCAN_API_KEY: this.app.remoteConfig.client_id,
+            YOUCAN_API_SECRET: this.app.remoteConfig.client_secret,
+            YOUCAN_API_SCOPES: this.app.remoteConfig.scopes.join(','),
+            APP_URL: this.app.networkConfig.appUrl,
+            PORT: this.app.networkConfig.port.toString(),
+        };
+    }
+    async openAppPreview() {
+        const endpointUrl = `${Env.apiHostname()}/apps/${this.app.config.id}/authorization-url`;
+        const { url } = await Http.get(endpointUrl);
+        System.open(url);
+    }
 }
 
 export { Dev as default };

package/dist/cli/commands/app/env/show.d.ts

@@ -0,0 +1,7 @@
+import { AppCommand } from '@/util/app-command';
+declare class EnvShow extends AppCommand {
+    static description: string;
+    run(): Promise<any>;
+    private printEnvironmentVariables;
+}
+export default EnvShow;

package/dist/cli/commands/app/env/show.js

@@ -0,0 +1,29 @@
+import { Session, Tasks, Color } from '@youcan/cli-kit';
+import { AppCommand } from '../../../../util/app-command.js';
+import { load } from '../../../../util/app-loader.js';
+
+class EnvShow extends AppCommand {
+    static description = 'Display app environment variables';
+    async run() {
+        this.app = await load();
+        this.session = await Session.authenticate(this);
+        await Tasks.run({}, [
+            {
+                title: 'Syncing app configuration..',
+                task: async () => { await this.syncAppConfig(); },
+            },
+        ]);
+        await this.printEnvironmentVariables();
+    }
+    async printEnvironmentVariables() {
+        if (!this.app.remoteConfig) {
+            throw new Error('remote app config not loaded');
+        }
+        this.log();
+        this.log(`${Color.yellow('YOUCAN_API_KEY')}=%s`, this.app.remoteConfig.client_id);
+        this.log(`${Color.yellow('YOUCAN_API_SECRET')}=%s`, this.app.remoteConfig.client_secret);
+        this.log(`${Color.yellow('YOUCAN_API_SCOPES')}=%s`, this.app.remoteConfig.scopes.join(','));
+    }
+}
+
+export { EnvShow as default };

package/dist/cli/commands/app/generate/extension.d.ts

@@ -1,6 +1,6 @@
-import { AppCommand } from '@/util/theme-command';
-declare class GenerateExtension extends AppCommand {
-    static description: string;
-    run(): Promise<any>;
-}
-export default GenerateExtension;
+import { AppCommand } from '@/util/app-command';
+declare class GenerateExtension extends AppCommand {
+    static description: string;
+    run(): Promise<any>;
+}
+export default GenerateExtension;

package/dist/cli/commands/app/generate/extension.js

@@ -1,58 +1,58 @@
 import { Path, Filesystem, String, Tasks } from '@youcan/cli-kit';
-import { AppCommand } from '../../../../util/theme-command.js';
+import { AppCommand } from '../../../../util/app-command.js';
 import extensions from '../../../services/generate/extensions/index.js';
 import { ensureExtensionDirectoryExists, initThemeExtension } from '../../../services/generate/generate.js';
 import { APP_CONFIG_FILENAME } from '../../../../constants.js';
 
-class GenerateExtension extends AppCommand {
-    static description = 'Generate an app extension';
-    async run() {
-        const filepath = Path.resolve(Path.cwd(), APP_CONFIG_FILENAME);
-        const app = await Filesystem.readJsonFile(filepath);
-        const { identifier } = await this.prompt({
-            name: 'identifier',
-            message: 'Extension type?',
-            type: 'select',
-            choices: extensions.map(ext => ({
-                title: ext.name,
-                value: ext.identifier,
-                description: ext.description,
-            })),
-        });
-        // TODO: prompt for extension type and flavor
-        const extension = extensions.find(ext => ext.identifier === identifier);
-        const type = extension.types[0];
-        const flavor = type.flavors[0];
-        const { name } = await this.prompt({
-            name: 'name',
-            message: 'Extension name?',
-            type: 'text',
-            initial: extension.name,
-            validate: prev => prev.length >= 3,
-            format: name => String.hyphenate(name),
-        });
-        await Tasks.run({}, [
-            {
-                title: 'Validating extension options..',
-                async task(ctx) {
-                    ctx.directory = await ensureExtensionDirectoryExists(name);
-                },
-            },
-            {
-                title: 'Initializing extension..',
-                async task(ctx) {
-                    await initThemeExtension({
-                        app,
-                        name,
-                        type,
-                        flavor,
-                        directory: ctx.directory,
-                    });
-                },
-            },
-        ]);
-        this.output.info(`Extension '${name}' successfully generated.`);
-    }
+class GenerateExtension extends AppCommand {
+    static description = 'Generate an app extension';
+    async run() {
+        const filepath = Path.resolve(Path.cwd(), APP_CONFIG_FILENAME);
+        const app = await Filesystem.readJsonFile(filepath);
+        const { identifier } = await this.prompt({
+            name: 'identifier',
+            message: 'Extension type?',
+            type: 'select',
+            choices: extensions.map(ext => ({
+                title: ext.name,
+                value: ext.identifier,
+                description: ext.description,
+            })),
+        });
+        // TODO: prompt for extension type and flavor
+        const extension = extensions.find(ext => ext.identifier === identifier);
+        const type = extension.types[0];
+        const flavor = type.flavors[0];
+        const { name } = await this.prompt({
+            name: 'name',
+            message: 'Extension name?',
+            type: 'text',
+            initial: extension.name,
+            validate: prev => prev.length >= 3,
+            format: name => String.hyphenate(name),
+        });
+        await Tasks.run({}, [
+            {
+                title: 'Validating extension options..',
+                async task(ctx) {
+                    ctx.directory = await ensureExtensionDirectoryExists(name);
+                },
+            },
+            {
+                title: 'Initializing extension..',
+                async task(ctx) {
+                    await initThemeExtension({
+                        app,
+                        name,
+                        type,
+                        flavor,
+                        directory: ctx.directory,
+                    });
+                },
+            },
+        ]);
+        this.output.info(`Extension '${name}' successfully generated.`);
+    }
 }
 
 export { GenerateExtension as default };

package/dist/cli/commands/app/install.d.ts

@@ -1,5 +1,5 @@
-import { AppCommand } from '@/util/theme-command';
-export default class Install extends AppCommand {
-    static description: string;
-    run(): Promise<void>;
-}
+import { AppCommand } from '@/util/app-command';
+export default class Install extends AppCommand {
+    static description: string;
+    run(): Promise<void>;
+}

package/dist/cli/commands/app/install.js

@@ -1,27 +1,27 @@
 import { Session, Tasks, Http, Env, System } from '@youcan/cli-kit';
 import { load } from '../../../util/app-loader.js';
-import { AppCommand } from '../../../util/theme-command.js';
+import { AppCommand } from '../../../util/app-command.js';
 
-class Install extends AppCommand {
-    static description = 'Generate an app installation URL';
-    async run() {
-        const app = await load();
-        if (!app.config.id) {
-            this.output.error('Please run the `dev` command before installing your app.');
-        }
-        await Session.authenticate(this);
-        const { url } = await Tasks.run({}, [
-            {
-                title: 'Building authorization url',
-                async task(ctx) {
-                    const { url } = await Http.get(`${Env.apiHostname()}/apps/${app.config.id}/authorization-url`);
-                    ctx.url = url;
-                },
-            },
-        ]);
-        await this.output.anykey('Press any key to open the installation page in your browser');
-        System.open(url);
-    }
+class Install extends AppCommand {
+    static description = 'Generate an app installation URL';
+    async run() {
+        const app = await load();
+        if (!app.config.id) {
+            this.output.error('Please run the `dev` command before installing your app.');
+        }
+        await Session.authenticate(this);
+        const { url } = await Tasks.run({}, [
+            {
+                title: 'Building authorization url',
+                async task(ctx) {
+                    const { url } = await Http.get(`${Env.apiHostname()}/apps/${app.config.id}/authorization-url`);
+                    ctx.url = url;
+                },
+            },
+        ]);
+        await this.output.anykey('Press any key to open the installation page in your browser');
+        System.open(url);
+    }
 }
 
 export { Install as default };

package/dist/cli/services/dev/workers/app-worker.d.ts

@@ -1,10 +1,11 @@
-import { type Cli, Worker } from '@youcan/cli-kit';
-import type { App } from '@/types';
-export default class AppWorker extends Worker.Abstract {
-    private command;
-    private app;
-    private logger;
-    constructor(command: Cli.Command, app: App);
-    boot(): Promise<void>;
-    run(): Promise<void>;
-}
+import { Worker } from '@youcan/cli-kit';
+import type { App } from '@/types';
+import type DevCommand from '@/cli/commands/app/dev';
+export default class AppWorker extends Worker.Abstract {
+    private command;
+    private app;
+    private logger;
+    constructor(command: DevCommand, app: App);
+    boot(): Promise<void>;
+    run(): Promise<void>;
+}

package/dist/cli/services/dev/workers/app-worker.js

@@ -1,35 +1,34 @@
-import { Worker, Color, Filesystem, Path } from '@youcan/cli-kit';
+import { Worker, Filesystem, Path } from '@youcan/cli-kit';
 import { APP_CONFIG_FILENAME } from '../../../../constants.js';
 
-class AppWorker extends Worker.Abstract {
-    command;
-    app;
-    logger;
-    constructor(command, app) {
-        super();
-        this.command = command;
-        this.app = app;
-        this.logger = new Worker.Logger('stdout', 'app', Color.cyan);
-    }
-    async boot() {
-    }
-    async run() {
-        await this.command.output.wait(500);
-        this.logger.write('watching for config updates...');
-        const watcher = Filesystem.watch(Path.resolve(this.app.root, APP_CONFIG_FILENAME), {
-            persistent: true,
-            ignoreInitial: true,
-            awaitWriteFinish: {
-                stabilityThreshold: 50,
-            },
-        });
-        watcher.once('change', async () => {
-            await watcher.close();
-            this.command.controller.abort();
-            this.logger.write('config update detected, reloading workers...');
-            this.command.config.runCommand(this.command.id, this.command.argv);
-        });
-    }
+class AppWorker extends Worker.Abstract {
+    command;
+    app;
+    logger;
+    constructor(command, app) {
+        super();
+        this.command = command;
+        this.app = app;
+        this.logger = new Worker.Logger('app', 'green');
+    }
+    async boot() { }
+    async run() {
+        await this.command.output.wait(500);
+        this.logger.write('watching for config updates...');
+        const watcher = Filesystem.watch(Path.resolve(this.app.root, APP_CONFIG_FILENAME), {
+            persistent: true,
+            ignoreInitial: true,
+            awaitWriteFinish: {
+                stabilityThreshold: 50,
+            },
+        });
+        watcher.once('change', async () => {
+            await watcher.close();
+            this.logger.write('config update detected, reloading workers...');
+            this.command.controller.abort();
+            this.command.reloadWorkers();
+        });
+    }
 }
 
 export { AppWorker as default };

package/dist/cli/services/dev/workers/index.d.ts

@@ -1,10 +1,14 @@
-import type { Cli, Worker } from '@youcan/cli-kit';
-import WebWorker from './web-worker';
-import AppWorker from './app-worker';
-import type { App, Extension, Web } from '@/types';
-export interface ExtensionWorkerCtor {
-    new (command: Cli.Command, app: App, extension: Extension): Worker.Interface;
-}
-export declare function bootAppWorker(command: Cli.Command, app: App): Promise<AppWorker>;
-export declare function bootExtensionWorker(command: Cli.Command, app: App, extension: Extension): Promise<Worker.Interface>;
-export declare function bootWebWorker(command: Cli.Command, app: App, web: Web): Promise<WebWorker>;
+import type { Cli, Services, Worker } from '@youcan/cli-kit';
+import WebWorker from './web-worker';
+import AppWorker from './app-worker';
+import TunnelWorker from './tunnel-worker';
+import type { App, Extension, Web } from '@/types';
+import type DevCommand from '@/cli/commands/app/dev';
+import type { AppCommand } from '@/util/app-command';
+export interface ExtensionWorkerCtor {
+    new (command: Cli.Command, app: App, extension: Extension): Worker.Interface;
+}
+export declare function bootAppWorker(command: DevCommand, app: App): Promise<AppWorker>;
+export declare function bootExtensionWorker(command: Cli.Command, app: App, extension: Extension): Promise<Worker.Interface>;
+export declare function bootWebWorker(command: Cli.Command, app: App, web: Web, env: Record<string, string>): Promise<WebWorker>;
+export declare function bootTunnelWorker(command: AppCommand, app: App, tunnel: Services.Cloudflared): Promise<TunnelWorker>;

package/dist/cli/services/dev/workers/index.js

@@ -1,25 +1,31 @@
 import ThemeExtensionWorker from './theme-extension-worker.js';
 import WebWorker from './web-worker.js';
 import AppWorker from './app-worker.js';
+import TunnelWorker from './tunnel-worker.js';
 
-const EXTENSION_WORKERS = {
-    theme: ThemeExtensionWorker,
-};
-async function bootAppWorker(command, app) {
-    const worker = new AppWorker(command, app);
-    await worker.boot();
-    return worker;
-}
-async function bootExtensionWorker(command, app, extension) {
-    const Ctor = EXTENSION_WORKERS[extension.config.type];
-    const worker = new Ctor(command, app, extension);
-    await worker.boot();
-    return worker;
-}
-async function bootWebWorker(command, app, web) {
-    const worker = new WebWorker(command, app, web);
-    await worker.boot();
-    return worker;
+const EXTENSION_WORKERS = {
+    theme: ThemeExtensionWorker,
+};
+async function bootAppWorker(command, app) {
+    const worker = new AppWorker(command, app);
+    await worker.boot();
+    return worker;
+}
+async function bootExtensionWorker(command, app, extension) {
+    const Ctor = EXTENSION_WORKERS[extension.config.type];
+    const worker = new Ctor(command, app, extension);
+    await worker.boot();
+    return worker;
+}
+async function bootWebWorker(command, app, web, env) {
+    const worker = new WebWorker(command, app, web, env);
+    await worker.boot();
+    return worker;
+}
+async function bootTunnelWorker(command, app, tunnel) {
+    const worker = new TunnelWorker(command, app, tunnel);
+    await worker.boot();
+    return worker;
 }
 
-export { bootAppWorker, bootExtensionWorker, bootWebWorker };
+export { bootAppWorker, bootExtensionWorker, bootTunnelWorker, bootWebWorker };

package/dist/cli/services/dev/workers/theme-extension-worker.d.ts

@@ -1,15 +1,15 @@
-import type { Cli } from '@youcan/cli-kit';
-import { Worker } from '@youcan/cli-kit';
-import type { App, Extension } from '@/types';
-export default class ThemeExtensionWorker extends Worker.Abstract {
-    private command;
-    private app;
-    private extension;
-    private logger;
-    private queue;
-    FILE_TYPES: string[];
-    constructor(command: Cli.Command, app: App, extension: Extension);
-    boot(): Promise<void>;
-    run(): Promise<void>;
-    private enqueue;
-}
+import type { Cli } from '@youcan/cli-kit';
+import { Worker } from '@youcan/cli-kit';
+import type { App, Extension } from '@/types';
+export default class ThemeExtensionWorker extends Worker.Abstract {
+    private command;
+    private app;
+    private extension;
+    private logger;
+    private queue;
+    FILE_TYPES: string[];
+    constructor(command: Cli.Command, app: App, extension: Extension);
+    boot(): Promise<void>;
+    run(): Promise<void>;
+    private enqueue;
+}