@youcan/theme 2.0.5 → 2.1.0

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

@@ -1,7 +1,9 @@
-import { Session, Tasks, Http, Env } from '@youcan/cli-kit';
+import { Session, Tasks, Http, Env, Path, Filesystem, Crypto } 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';
+import { execute } from '../../services/dev/execute.js';
+import { THEME_FILE_TYPES } from '../../../constants.js';
 
 class Dev extends ThemeCommand {
     static description = 'Start a theme development server and preview your changes';
@@ -10,13 +12,45 @@ class Dev extends ThemeCommand {
         await Session.authenticate(this);
         const context = await Tasks.run({ cmd: this, workers: [] }, [
             {
-                title: 'Fetching theme info...',
+                title: 'Fetching theme metadata...',
                 async task(ctx) {
-                    const res = await Http.get(`${Env.apiHostname()}/me`);
+                    const store = await Http.get(`${Env.apiHostname()}/me`);
                     ctx.store = {
-                        slug: res.slug,
-                        domain: res.domain,
+                        slug: store.slug,
+                        domain: store.domain,
                     };
+                    const metadata = await Http.get(`${Env.apiHostname()}/themes/${theme.theme_id}/metadata`);
+                    theme.metadata = metadata;
+                },
+            },
+            {
+                title: 'Syncing theme files, please wait...',
+                async task(ctx) {
+                    for (const type of THEME_FILE_TYPES) {
+                        const descriptors = theme.metadata[type] ?? [];
+                        const directory = Path.resolve(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));
+                        }
+                        for (const file of present.filter(f => !descriptors.find(d => d.file_name === f))) {
+                            await execute(theme, 'save', type, file);
+                        }
+                        for (const descriptor of descriptors) {
+                            const path = Path.resolve(directory, descriptor.file_name);
+                            if (!(await Filesystem.exists(path))) {
+                                return await execute(theme, 'delete', type, descriptor.file_name);
+                            }
+                            const buffer = await Filesystem.readFile(path);
+                            const hash = Crypto.sha1(buffer);
+                            if (hash !== descriptor.hash) {
+                                await execute(theme, 'save', type, descriptor.file_name);
+                            }
+                        }
+                    }
                 },
             },
             {

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

@@ -0,0 +1,4 @@
+import type { Worker } from '@youcan/cli-kit';
+import type { Theme } from '@/types';
+import type { THEME_FILE_TYPES } from '@/constants';
+export declare function execute(theme: Theme, op: 'save' | 'delete', type: typeof THEME_FILE_TYPES[number], name: string, logger?: Worker.Logger | null): Promise<void>;

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

@@ -0,0 +1,28 @@
+import { Path, Form, Http, Env } from '@youcan/cli-kit';
+
+async function execute(theme, op, type, name, logger = null) {
+    try {
+        const path = Path.join(theme.root, type, name);
+        const payload = {
+            file_name: name,
+            file_type: type,
+            file_operation: op,
+        };
+        if (op === 'save') {
+            payload.file_content = await Form.file(path);
+        }
+        await Http.post(`${Env.apiHostname()}/themes/${theme.theme_id}/update`, {
+            body: Form.convert(payload),
+        });
+        logger && logger.write(`[${op === 'save' ? 'updated' : 'deleted'}] - ${Path.join(type, name)}`);
+    }
+    catch (err) {
+        if (err instanceof Error && logger) {
+            logger.write(`[error] - ${Path.join(type, name)}\n${err.message}`);
+            return;
+        }
+        throw err;
+    }
+}
+
+export { execute };

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

@@ -1,6 +1,6 @@
 import { Worker } from '@youcan/cli-kit';
 import type { ThemeCommand } from '@/util/theme-command';
-import type { Metadata, Store, Theme } from '@/types';
+import type { Store, Theme } from '@/types';
 export default class ThemeWorker extends Worker.Abstract {
     private command;
     private store;
@@ -9,9 +9,9 @@ export default class ThemeWorker extends Worker.Abstract {
     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;
+    private execute;
 }

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

@@ -1,6 +1,8 @@
-import { Worker, Color, Http, Env, Path, Filesystem, Crypto, System, Form } from '@youcan/cli-kit';
+import { Worker, Color, Http, System, Path, Filesystem } from '@youcan/cli-kit';
 import { Server } from 'socket.io';
 import debounce from 'debounce';
+import { execute } from './execute.js';
+import { THEME_FILE_TYPES } from '../../../constants.js';
 
 class ThemeWorker extends Worker.Abstract {
     command;
@@ -10,15 +12,6 @@ class ThemeWorker extends Worker.Abstract {
     previewLogger;
     queue = [];
     io;
-    FILE_TYPES = [
-        'layouts',
-        'sections',
-        'locales',
-        'assets',
-        'snippets',
-        'config',
-        'templates',
-    ];
     constructor(command, store, theme) {
         super();
         this.command = command;
@@ -29,33 +22,6 @@ class ThemeWorker extends Worker.Abstract {
     }
     async boot() {
         try {
-            const res = await Http.get(`${Env.apiHostname()}/themes/${this.theme.theme_id}/metadata`);
-            this.theme.metadata = res;
-            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);
-                    }
-                });
-            }
             this.io = new Server(7565, {
                 cors: {
                     origin: `${Http.scheme()}://${this.store.domain}`,
@@ -72,7 +38,7 @@ class ThemeWorker extends Worker.Abstract {
         }
     }
     async run() {
-        const directories = this.FILE_TYPES.map(t => Path.resolve(this.theme.root, t));
+        const directories = THEME_FILE_TYPES.map(t => Path.resolve(this.theme.root, t));
         const watcher = Filesystem.watch(directories, {
             awaitWriteFinish: { stabilityThreshold: 50 },
             ignoreInitial: true,
@@ -99,6 +65,7 @@ class ThemeWorker extends Worker.Abstract {
                     break;
             }
         });
+        this.logger.write('Listening for changes...');
         // quick racing conditions hack
         setInterval(async () => {
             const task = this.queue.shift();
@@ -110,32 +77,16 @@ class ThemeWorker extends Worker.Abstract {
     }
     enqueue(op, type, name) {
         this.queue.push(async () => {
-            try {
-                const path = Path.join(this.theme.root, type, name);
-                const payload = {
-                    file_name: name,
-                    file_type: type,
-                    file_operation: op,
-                };
-                if (op === 'save') {
-                    payload.file_content = await Form.file(path);
-                }
-                await Http.post(`${Env.apiHostname()}/themes/${this.theme.theme_id}/update`, {
-                    body: Form.convert(payload),
-                });
-                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) {
-                if (err instanceof Error) {
-                    this.logger.write(`[error] - ${Path.join(type, name)}\n${err.message}`);
-                }
-            }
+            await this.execute(op, type, name, true);
+            debounce(() => {
+                this.io.emit('theme:update');
+                this.previewLogger.write('reloading preview...');
+            }, 100)();
         });
     }
+    async execute(op, type, name, log = false) {
+        return execute(this.theme, op, type, name, this.logger);
+    }
 }
 
 export { ThemeWorker as default };

package/dist/constants.d.ts

@@ -1 +1,3 @@
+import type { Metadata } from './types';
 export declare const THEME_CONFIG_FILENAME = "youcan.theme.json";
+export declare const THEME_FILE_TYPES: Array<keyof Metadata>;

package/dist/constants.js

@@ -1,3 +1,12 @@
-const THEME_CONFIG_FILENAME = 'youcan.theme.json';
+const THEME_CONFIG_FILENAME = 'youcan.theme.json';
+const THEME_FILE_TYPES = [
+    'layouts',
+    'sections',
+    'locales',
+    'assets',
+    'snippets',
+    'config',
+    'templates',
+];
 
-export { THEME_CONFIG_FILENAME };
+export { THEME_CONFIG_FILENAME, THEME_FILE_TYPES };

package/package.json

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