@youcan/app 2.2.0 → 2.3.1

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

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

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

@@ -1,13 +1,11 @@
-import { Session, Tasks, UI, Env, Http, Filesystem, Path, System } from '@youcan/cli-kit';
-import { AppCommand } from '../../../util/theme-command.js';
+import { Session, Tasks, UI, System, Services, Filesystem, Path, 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';
-    app;
-    session;
     hotKeys = [
         {
             keyboardKey: 'p',
@@ -25,60 +23,77 @@ class Dev extends AppCommand {
         this.app = await load();
         const { workers } = await Tasks.run({ cmd: this, workers: [] }, [
             {
-                title: 'Syncing app configuration..',
-                task: async () => await this.syncAppConfig(),
+                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 = await this.prepareDevProcesses();
+                    ctx.workers.push(...await this.prepareDevProcesses());
                 },
             },
         ]);
         UI.renderDevOutput({ hotKeys: this.hotKeys, cmd: this });
         this.runWorkers(workers);
     }
+    async prepareNetworkOptions() {
+        const port = await System.getNextAvailablePort(3000);
+        this.app.network_config = {
+            app_port: port,
+            app_url: `http://localhost:${port}`
+        };
+        const worker = await bootTunnelWorker(this, this.app, new Services.Cloudflared());
+        this.app.config = {
+            ...this.app.config,
+            app_url: worker.getUrl(),
+            redirect_urls: this.app.config.redirect_urls?.length > 0
+                ? this.app.config.redirect_urls.map(r => new URL(new URL(r).pathname, worker.getUrl()).toString())
+                : [new URL('/auth/callback', worker.getUrl()).toString()]
+        };
+        await Filesystem.writeJsonFile(Path.join(this.app.root, APP_CONFIG_FILENAME), this.app.config);
+        return worker;
+    }
     async reloadWorkers() {
         this.controller = new AbortController();
+        // Preserve network config.
+        const networkConfig = this.app.network_config;
         this.app = await load();
+        this.app.network_config = networkConfig;
         await this.syncAppConfig();
         await this.runWorkers(await this.prepareDevProcesses());
     }
     async runWorkers(workers) {
-        await Promise.all(workers.map(worker => worker.run())).catch(_ => { });
-    }
-    async syncAppConfig() {
-        const endpoint = this.app.config.id == null
-            ? `${Env.apiHostname()}/apps/create`
-            : `${Env.apiHostname()}/apps/${this.app.config.id}/update`;
-        const res = await Http.post(endpoint, {
-            headers: { Authorization: `Bearer ${this.session.access_token}` },
-            body: JSON.stringify({
-                name: this.app.config.name,
-                app_url: this.app.config.app_url,
-                redirect_urls: this.app.config.redirect_urls,
-            }),
-        });
-        this.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(this.app.root, APP_CONFIG_FILENAME), this.app.config);
+        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.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.remote_config) {
+            throw new Error('remote app config not loaded');
+        }
+        if (!this.app.network_config) {
+            throw new Error('app network config is not set');
+        }
+        return {
+            YOUCAN_API_KEY: this.app.remote_config.client_id,
+            YOUCAN_API_SECRET: this.app.remote_config.client_secret,
+            YOUCAN_API_SCOPES: this.app.remote_config.scopes.join(','),
+            APP_URL: this.app.network_config.app_url,
+            PORT: this.app.network_config.app_port.toString(),
+        };
+    }
     async openAppPreview() {
         const endpointUrl = `${Env.apiHostname()}/apps/${this.app.config.id}/authorization-url`;
         const { url } = await Http.get(endpointUrl);

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.remote_config) {
+            throw new Error('remote app config not loaded');
+        }
+        this.log();
+        this.log(`${Color.yellow('YOUCAN_API_KEY')}=%s`, this.app.remote_config.client_id);
+        this.log(`${Color.yellow('YOUCAN_API_SECRET')}=%s`, this.app.remote_config.client_secret);
+        this.log(`${Color.yellow('YOUCAN_API_SCOPES')}=%s`, this.app.remote_config.scopes.join(','));
+    }
+}
+
+export { EnvShow as default };

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

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

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

@@ -1,5 +1,5 @@
 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';

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

@@ -1,4 +1,4 @@
-import { AppCommand } from '@/util/theme-command';
+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,6 +1,6 @@
 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';

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

@@ -11,8 +11,7 @@ class AppWorker extends Worker.Abstract {
         this.app = app;
         this.logger = new Worker.Logger('app', 'green');
     }
-    async boot() {
-    }
+    async boot() { }
     async run() {
         await this.command.output.wait(500);
         this.logger.write('watching for config updates...');

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

@@ -1,11 +1,14 @@
-import type { Cli, Worker } from '@youcan/cli-kit';
+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): Promise<WebWorker>;
+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,6 +1,7 @@
 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,
@@ -16,10 +17,15 @@ async function bootExtensionWorker(command, app, extension) {
     await worker.boot();
     return worker;
 }
-async function bootWebWorker(command, app, web) {
-    const worker = new WebWorker(command, app, web);
+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/tunnel-worker.d.ts

@@ -0,0 +1,16 @@
+import { Worker } from '@youcan/cli-kit';
+import type { Services } from '@youcan/cli-kit';
+import type { App } from '@/types';
+import type { AppCommand } from '@/util/app-command';
+export default class TunnelWorker extends Worker.Abstract {
+    private command;
+    private app;
+    private tunnelService;
+    private readonly logger;
+    private url;
+    constructor(command: AppCommand, app: App, tunnelService: Services.Cloudflared);
+    boot(): Promise<void>;
+    run(): Promise<void>;
+    private checkForError;
+    getUrl(): string;
+}

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

@@ -0,0 +1,53 @@
+import { Worker, System } from '@youcan/cli-kit';
+
+class TunnelWorker extends Worker.Abstract {
+    command;
+    app;
+    tunnelService;
+    logger;
+    url = null;
+    constructor(command, app, tunnelService) {
+        super();
+        this.command = command;
+        this.app = app;
+        this.tunnelService = tunnelService;
+        this.logger = new Worker.Logger('tunnel', 'dim');
+    }
+    async boot() {
+        if (!this.app.network_config) {
+            throw new Error('app network config is not set');
+        }
+        this.logger.write('start tunneling the app');
+        await this.tunnelService.tunnel(this.app.network_config.app_port);
+        let attempts = 0;
+        while (!this.url && attempts <= 28) {
+            const url = this.tunnelService.getUrl();
+            if (url) {
+                this.url = url;
+                this.app.network_config.app_url = this.url;
+                this.logger.write(`tunneled url obtained: \`${url}\``);
+            }
+            await System.sleep(0.5);
+        }
+        if (!this.url) {
+            this.logger.write('could not establish a tunnel, using localhost instead');
+        }
+    }
+    async run() {
+        setInterval(() => this.checkForError, 500);
+    }
+    checkForError() {
+        const error = this.tunnelService.getError();
+        if (error) {
+            throw new Error(`tunnel stopped: ${error}`);
+        }
+    }
+    getUrl() {
+        if (!this.url) {
+            throw new Error('app url not set');
+        }
+        return this.url;
+    }
+}
+
+export { TunnelWorker as default };

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

@@ -1,11 +1,12 @@
 import { type Cli, Worker } from '@youcan/cli-kit';
 import type { App, Web } from '@/types';
 export default class WebWorker extends Worker.Abstract {
-    private command;
-    private app;
-    private web;
+    private readonly command;
+    private readonly app;
+    private readonly web;
+    private readonly env;
     private logger;
-    constructor(command: Cli.Command, app: App, web: Web);
+    constructor(command: Cli.Command, app: App, web: Web, env: Record<string, string>);
     boot(): Promise<void>;
     run(): Promise<void>;
 }

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

@@ -4,12 +4,14 @@ class WebWorker extends Worker.Abstract {
     command;
     app;
     web;
+    env;
     logger;
-    constructor(command, app, web) {
+    constructor(command, app, web, env) {
         super();
         this.command = command;
         this.app = app;
         this.web = web;
+        this.env = env;
         this.logger = new Worker.Logger(this.web.config.name || 'web', 'blue');
     }
     async boot() {
@@ -20,6 +22,7 @@ class WebWorker extends Worker.Abstract {
             stdout: this.logger,
             signal: this.command.controller.signal,
             stderr: new Worker.Logger(this.web.config.name || 'web', 'red'),
+            env: this.env,
         });
     }
 }

package/dist/types.d.ts

@@ -11,6 +11,16 @@ export type AppConfig = {
         scopes: string[];
     };
 } & InitialAppConfig;
+export interface RemoteAppConfig {
+    id: string;
+    name: string;
+    app_url: string;
+    owner_id: string;
+    client_id: string;
+    client_secret: string;
+    redirect_urls: string[];
+    scopes: string[];
+}
 export interface ExtensionConfig {
     [key: string]: unknown;
     type: string;
@@ -54,6 +64,11 @@ export interface App {
     root: string;
     webs: Web[];
     config: AppConfig;
+    remote_config?: RemoteAppConfig;
+    network_config?: {
+        app_url: string;
+        app_port: number;
+    };
     extensions: Extension[];
 }
 export interface ExtensionFileDescriptor {

package/dist/util/app-command.d.ts

@@ -0,0 +1,8 @@
+import type { Session } from '@youcan/cli-kit';
+import { Cli } from '@youcan/cli-kit';
+import type { App } from '@/types';
+export declare abstract class AppCommand extends Cli.Command {
+    protected app: App;
+    protected session: Session.StoreSession;
+    syncAppConfig(): Promise<App>;
+}

package/dist/util/app-command.js

@@ -0,0 +1,35 @@
+import { Cli, Env, Http, Filesystem, Path } from '@youcan/cli-kit';
+import { APP_CONFIG_FILENAME } from '../constants.js';
+
+class AppCommand extends Cli.Command {
+    app;
+    session;
+    async syncAppConfig() {
+        const endpoint = this.app.config.id == null
+            ? `${Env.apiHostname()}/apps/create`
+            : `${Env.apiHostname()}/apps/${this.app.config.id}/update`;
+        const res = await Http.post(endpoint, {
+            headers: { Authorization: `Bearer ${this.session.access_token}` },
+            body: JSON.stringify({
+                name: this.app.config.name,
+                app_url: this.app.config.app_url,
+                redirect_urls: this.app.config.redirect_urls
+            }),
+        });
+        this.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(this.app.root, APP_CONFIG_FILENAME), this.app.config);
+        this.app.remote_config = res;
+        return this.app;
+    }
+}
+
+export { AppCommand };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/app",
   "type": "module",
-  "version": "2.2.0",
+  "version": "2.3.1",
   "description": "OCLIF plugin for building apps",
   "author": "YouCan <contact@youcan.shop> (https://youcan.shop)",
   "license": "MIT",
@@ -17,7 +17,7 @@
   "dependencies": {
     "@oclif/core": "^2.15.0",
     "dayjs": "^1.11.10",
-    "@youcan/cli-kit": "2.2.0"
+    "@youcan/cli-kit": "2.3.1"
   },
   "devDependencies": {
     "@oclif/plugin-legacy": "^1.3.0",
@@ -25,7 +25,12 @@
     "shx": "^0.3.4"
   },
   "oclif": {
-    "commands": "./dist/cli/commands"
+    "commands": "./dist/cli/commands",
+    "topics": {
+      "app:env": {
+        "description": "Manage app environment variables"
+      }
+    }
   },
   "scripts": {
     "build": "shx rm -rf dist && tsc --noEmit && rollup --config rollup.config.js",

package/dist/util/theme-command.d.ts

@@ -1,3 +0,0 @@
-import { Cli } from '@youcan/cli-kit';
-export declare abstract class AppCommand extends Cli.Command {
-}

package/dist/util/theme-command.js

@@ -1,6 +0,0 @@
-import { Cli } from '@youcan/cli-kit';
-
-class AppCommand extends Cli.Command {
-}
-
-export { AppCommand };