@youcan/theme 1.2.0-beta.7 → 1.2.0-beta.8

package/dist/cli/commands/theme/delete.d.ts

@@ -0,0 +1,4 @@
+import { ThemeCommand } from '@/util/theme-command';
+export default class Delete extends ThemeCommand {
+    run(): Promise<void>;
+}

package/dist/cli/commands/theme/delete.js

@@ -0,0 +1,32 @@
+import { Session, Http, Env, Tasks } from '@youcan/cli-kit';
+import { ThemeCommand } from '../../../util/theme-command.js';
+
+class Delete extends ThemeCommand {
+    async run() {
+        await Session.authenticate(this);
+        const { dev: themes } = await Http.get(`${Env.apiHostname()}/themes`);
+        if (!themes.length) {
+            return this.output.info('You have no remote dev themes');
+        }
+        const choices = themes.map(t => ({ title: t.name, value: t.id }));
+        const { identifiers } = await this.prompt({
+            choices,
+            type: 'multiselect',
+            name: 'identifiers',
+            message: 'Select themes to delete',
+        });
+        const tasks = identifiers.map((id) => {
+            const theme = themes.find(t => t.id === id);
+            return {
+                title: `Deleting '${theme.name}'...`,
+                async task() {
+                    await Http.post(`${Env.apiHostname()}/themes/${theme.id}/delete`);
+                },
+            };
+        });
+        await Tasks.run({}, tasks);
+        this.output.info(`Done! ${identifiers.length} themes deleted.`);
+    }
+}
+
+export { Delete as default };

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

@@ -0,0 +1,4 @@
+import { ThemeCommand } from '@/util/theme-command';
+export default class Dev extends ThemeCommand {
+    run(): Promise<void>;
+}

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

@@ -0,0 +1,35 @@
+import { Session, Tasks, Http, Env } from '@youcan/cli-kit';
+import { ThemeCommand } from '../../../util/theme-command.js';
+import { load } from '../../../util/theme-loader.js';
+import ThemeWorker from '../../services/dev/worker.js';
+
+class Dev extends ThemeCommand {
+    async run() {
+        const theme = await load();
+        await Session.authenticate(this);
+        const context = await Tasks.run({ cmd: this, workers: [] }, [
+            {
+                title: 'Fetching theme info...',
+                async task(ctx) {
+                    const res = await Http.get(`${Env.apiHostname()}/me`);
+                    ctx.store = {
+                        slug: res.slug,
+                        domain: res.domain,
+                    };
+                },
+            },
+            {
+                title: 'Preparing dev processes...',
+                async task(ctx) {
+                    ctx.workers = [
+                        new ThemeWorker(ctx.cmd, ctx.store, theme),
+                    ];
+                    await Promise.all(ctx.workers.map(async (w) => await w.boot()));
+                },
+            },
+        ]);
+        await Promise.all(context.workers.map(async (w) => await w.run()));
+    }
+}
+
+export { Dev as default };

package/dist/cli/commands/theme/init.js

@@ -68,7 +68,7 @@ async function prompt(command) {
         {
             name: 'theme_name',
             type: 'text',
-            initial: 'light-theme',
+            initial: 'Starter',
             message: 'Your theme\'s name',
             validate: (v) => {
                 if (!v.length) {
@@ -80,12 +80,6 @@ async function prompt(command) {
                 return true;
             },
         },
-        {
-            type: 'text',
-            name: 'theme_name',
-            message: 'The theme\'s name, used for display purposes.',
-            initial: 'Starter',
-        },
         {
             type: 'text',
             name: 'theme_author',

package/dist/cli/services/dev/worker.d.ts

@@ -0,0 +1,17 @@
+import { Worker } from '@youcan/cli-kit';
+import type { ThemeCommand } from '@/util/theme-command';
+import type { Metadata, Store, Theme } from '@/types';
+export default class ThemeWorker extends Worker.Abstract {
+    private command;
+    private store;
+    private theme;
+    private logger;
+    private previewLogger;
+    private queue;
+    private io;
+    FILE_TYPES: Array<keyof Metadata>;
+    constructor(command: ThemeCommand, store: Store, theme: Theme);
+    boot(): Promise<void>;
+    run(): Promise<void>;
+    private enqueue;
+}

package/dist/cli/services/dev/worker.js

@@ -0,0 +1,138 @@
+import { Worker, Color, Http, Env, System, Path, Filesystem, Crypto, Form } from '@youcan/cli-kit';
+import { Server } from 'socket.io';
+import debounce from 'debounce';
+
+class ThemeWorker extends Worker.Abstract {
+    command;
+    store;
+    theme;
+    logger;
+    previewLogger;
+    queue = [];
+    io;
+    FILE_TYPES = [
+        'layouts',
+        'sections',
+        'locales',
+        'assets',
+        'snippets',
+        'config',
+        'templates',
+    ];
+    constructor(command, store, theme) {
+        super();
+        this.command = command;
+        this.store = store;
+        this.theme = theme;
+        this.logger = new Worker.Logger('stdout', 'themes', Color.magenta);
+        this.previewLogger = new Worker.Logger('stdout', 'preview', Color.dim);
+    }
+    async boot() {
+        try {
+            const res = await Http.get(`${Env.apiHostname()}/themes/${this.theme.theme_id}/metadata`);
+            this.theme.metadata = res;
+            this.io = new Server(7565, {
+                cors: {
+                    origin: `${Http.scheme()}://${this.store.domain}`,
+                    methods: ['GET', 'POST'],
+                },
+            });
+            this.io.on('connection', (socket) => {
+                this.previewLogger.write(`attached to preview page at ${socket.handshake.address}`);
+            });
+            System.open(`${Http.scheme()}://${this.store.domain}/themes/${this.theme.theme_id}/preview`);
+        }
+        catch (err) {
+            this.command.error(err);
+        }
+    }
+    async run() {
+        this.logger.write(`pushing changes to ${this.theme.metadata.theme_name}...`);
+        for (const type of this.FILE_TYPES) {
+            const descriptors = this.theme.metadata[type] ?? [];
+            const directory = Path.resolve(this.theme.root, type);
+            const present = await Filesystem.exists(directory)
+                ? await Filesystem.readdir(directory)
+                : [];
+            if (type === 'config') {
+                const order = ['settings_schema.json', 'settings_data.json'];
+                descriptors.sort((a, b) => order.indexOf(a.file_name) - order.indexOf(b.file_name));
+            }
+            present.filter(f => !descriptors.find(d => d.file_name === f))
+                .forEach(async (file) => this.enqueue('save', type, file));
+            descriptors.forEach(async (descriptor) => {
+                const path = Path.resolve(directory, descriptor.file_name);
+                if (!(await Filesystem.exists(path))) {
+                    return this.enqueue('delete', type, descriptor.file_name);
+                }
+                const buffer = await Filesystem.readFile(path);
+                const hash = Crypto.sha1(buffer);
+                if (hash !== descriptor.hash) {
+                    this.enqueue('save', type, descriptor.file_name);
+                }
+            });
+        }
+        const directories = this.FILE_TYPES.map(t => Path.resolve(this.theme.root, t));
+        const watcher = Filesystem.watch(directories, {
+            awaitWriteFinish: { stabilityThreshold: 50 },
+            ignoreInitial: true,
+            persistent: true,
+        });
+        this.command.controller.signal.addEventListener('abort', () => {
+            watcher.close();
+        });
+        watcher.on('all', async (event, path) => {
+            if (!['add', 'change', 'unlink'].includes(event)) {
+                return;
+            }
+            const [filetype, filename] = [
+                Path.basename(Path.dirname(path)),
+                Path.basename(path),
+            ];
+            switch (event) {
+                case 'add':
+                case 'change':
+                    this.enqueue('save', filetype, filename);
+                    break;
+                case 'unlink':
+                    this.enqueue('delete', filetype, filename);
+                    break;
+            }
+        });
+        // quick racing conditions hack
+        setInterval(async () => {
+            const task = this.queue.shift();
+            if (task == null) {
+                return;
+            }
+            await task();
+        }, 10);
+    }
+    enqueue(op, type, name) {
+        this.queue.push(async () => {
+            try {
+                const path = Path.join(this.theme.root, type, name);
+                await Http.post(`${Env.apiHostname()}/themes/${this.theme.theme_id}/update`, {
+                    body: Form.convert({
+                        file_name: name,
+                        file_type: type,
+                        file_operation: op,
+                        file_content: op === 'save'
+                            ? await Form.file(path)
+                            : undefined,
+                    }),
+                });
+                this.logger.write(`[${op === 'save' ? 'updated' : 'deleted'}] - ${Path.join(type, name)}`);
+                debounce(() => {
+                    this.io.emit('theme:update');
+                    this.previewLogger.write('reloading preview...');
+                }, 100)();
+            }
+            catch (err) {
+                this.logger.write(`[error] - ${Path.join(type, name)}`);
+            }
+        });
+    }
+}
+
+export { ThemeWorker as default };

package/dist/types.d.ts

@@ -0,0 +1,40 @@
+export interface FileDescriptor {
+    id: string;
+    type: string;
+    name: string;
+    file_name: string;
+    updated: boolean;
+    deleted: boolean;
+    size: number;
+    hash: string;
+}
+export interface Metadata {
+    theme_name: string;
+    theme_author: string;
+    theme_version: string;
+    theme_support_url: string;
+    theme_documentation_url: string;
+    config: FileDescriptor[];
+    layouts: FileDescriptor[];
+    sections: FileDescriptor[];
+    templates: FileDescriptor[];
+    locales: FileDescriptor[];
+    snippets: FileDescriptor[];
+    assets: FileDescriptor[];
+}
+export interface Theme {
+    root: string;
+    theme_id: string;
+    metadata?: Metadata;
+}
+export interface ThemeInfo {
+    id: string;
+    name: string;
+    size: number;
+    version: string;
+    live: boolean;
+}
+export interface Store {
+    domain: string;
+    slug: string;
+}

package/dist/types.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,2 @@
+import type { Theme } from '@/types';
+export declare function load(): Promise<Theme>;

package/dist/util/theme-loader.js

@@ -0,0 +1,16 @@
+import { Path, Filesystem } from '@youcan/cli-kit';
+import { THEME_CONFIG_FILENAME } from '../constants.js';
+
+async function load() {
+    const path = Path.resolve(Path.cwd(), THEME_CONFIG_FILENAME);
+    if (!await Filesystem.exists(path)) {
+        throw new Error(`Theme config not found at ${path}`);
+    }
+    const config = await Filesystem.readJsonFile(path);
+    return {
+        ...config,
+        root: Path.cwd(),
+    };
+}
+
+export { load };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@youcan/theme",
   "type": "module",
-  "version": "1.2.0-beta.7",
+  "version": "1.2.0-beta.8",
   "description": "OCLIF plugin for building themes",
   "author": "YouCan <contact@youcan.shop> (https://youcan.shop)",
   "license": "MIT",
@@ -16,7 +16,9 @@
   ],
   "dependencies": {
     "@oclif/core": "^2.15.0",
-    "@youcan/cli-kit": "1.2.0-beta.7"
+    "debounce": "^2.0.0",
+    "socket.io": "^4.7.2",
+    "@youcan/cli-kit": "1.2.0-beta.8"
   },
   "devDependencies": {
     "@oclif/plugin-legacy": "^1.3.0",