clickgo 6.8.0 → 6.8.1

package/test/tuieditor-locale.mjs

@@ -0,0 +1,175 @@
+import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
+import vm from 'node:vm';
+import { setImmediate } from 'node:timers/promises';
+import ts from 'typescript';
+import { JSDOM } from 'jsdom';
+
+const source = await readFile(new URL('../dist/sources/control/tuieditor/code.ts', import.meta.url), 'utf8');
+const compiled = ts.transpileModule(source, {
+    compilerOptions: { module: ts.ModuleKind.CommonJS, target: ts.ScriptTarget.ES2022, esModuleInterop: false },
+}).outputText;
+const dom = new JSDOM('<!doctype html><html><body></body></html>');
+const { document } = dom.window;
+const requests = [];
+const editors = [];
+function deferred() {
+    let resolve;
+    let reject;
+    const promise = new Promise((yes, no) => { resolve = yes; reject = no; });
+    return { promise, resolve, reject };
+}
+class AbstractControl {
+    get locale() { return this.testLocale; }
+    propBoolean(name) { return this.props[name] === true; }
+    watch(name, callback, options) {
+        this.watches.set(name, callback);
+        if (options?.immediate) callback();
+    }
+    emit() {}
+}
+class Editor {
+    constructor(options) {
+        this.options = options;
+        this.i18n = { get: key => key };
+        options.el.appendChild(document.createElement('div'));
+        editors.push(this);
+    }
+    insertToolbarItem() {}
+}
+let main;
+const clickgo = {
+    modules: {},
+    getCdn: () => 'https://cdn.example',
+    getDirname: () => 'https://app.example/clickgo',
+    core: { getModule: () => main },
+    control: { AbstractControl },
+    tool: {
+        loadScript(url) {
+            const pending = deferred();
+            requests.push({ url, ...pending });
+            return pending.promise;
+        },
+    },
+    dom: { createElement: name => document.createElement(name), watchStyle() {} },
+};
+// Build the actual shared module once, then evaluate controls independently as different tasks do.
+const coreSource = await readFile(new URL('../dist/lib/core.ts', import.meta.url), 'utf8');
+const tree = ts.createSourceFile('core.ts', coreSource, ts.ScriptTarget.ES2022, true);
+const names = new Set(['getModule', 'loadModule']);
+const selected = tree.statements.filter(node =>
+    (ts.isVariableStatement(node) && node.declarationList.declarations.some(item => item.name.getText(tree) === 'modules')) ||
+    (ts.isFunctionDeclaration(node) && node.body && names.has(node.name?.text)));
+const core = {};
+vm.runInNewContext(ts.transpileModule(selected.map(node => node.getText(tree)).join('\n'), {
+    compilerOptions: { module: ts.ModuleKind.CommonJS, target: ts.ScriptTarget.ES2022, esModuleInterop: false },
+}).outputText, {
+    exports: core, window: { toastui: { Editor } }, clickgo,
+    lTool: { ...clickgo.tool, loadAssets: async () => true, loadStyle() {}, urlResolve: (base, path) => new URL(path, base).href },
+});
+const shared = await core.getModule('@toast-ui/editor');
+main = Promise.resolve(shared);
+function loadControl() {
+    const exports = {};
+    vm.runInNewContext(compiled, { exports, require: () => clickgo });
+    return exports.default;
+}
+let Control = loadControl();
+function create(locale) {
+    const control = new Control();
+    control.testLocale = locale;
+    control.watches = new Map();
+    control.element = document.createElement('div');
+    const content = document.createElement('div');
+    const pop = document.createElement('div');
+    control.element.append(content, pop);
+    control.refs = { content, pop };
+    document.body.appendChild(control.element);
+    return control;
+}
+await create('en').onMounted();
+await create('ar').onMounted();
+assert.equal(requests.length, 0, 'English and unsupported languages need no locale scripts');
+assert.equal(editors.at(-1).options.language, 'en');
+assert.equal(editors.at(-1).options.el.dir, 'rtl');
+
+const base = deferred();
+main = base.promise;
+const first = create('sc');
+Control = loadControl();
+const second = create('sc');
+const a = first.onMounted();
+const b = second.onMounted();
+assert.equal(requests.length, 0, 'locale registration waits for the main library');
+base.resolve(shared);
+await setImmediate();
+assert.equal(requests.length, 1, 'independent task control modules share one pending language request');
+assert.ok(requests[0].url.endsWith('/i18n/zh-cn.min.js'));
+assert.equal(editors.length, 2, 'instances wait until their locale is registered');
+requests[0].resolve(true);
+await Promise.all([a, b]);
+assert.equal(first.access.tuieditor.options.language, 'zh-CN');
+assert.equal(second.access.tuieditor.options.language, 'zh-CN');
+assert.notEqual(first.access.tuieditor, second.access.tuieditor);
+await create('sc').onMounted();
+assert.equal(requests.length, 1, 'ready locale scripts are reused across task control modules');
+
+Control = loadControl();
+await create('sc').onMounted();
+assert.equal(requests.length, 1, 'a later task reuses the same completed language request');
+
+first.testLocale = 'ja';
+first.watches.get('locale')();
+assert.equal(requests.length, 1, 'changing task locale does not reload an existing editor');
+assert.equal(first.access.tuieditor.options.language, 'zh-CN');
+main = Promise.resolve(shared);
+const japanese = create('ja');
+const c = japanese.onMounted();
+await setImmediate();
+assert.ok(requests.at(-1).url.endsWith('/i18n/ja-jp.min.js'));
+requests.at(-1).resolve(true);
+await c;
+assert.equal(japanese.access.tuieditor.options.language, 'ja-JP', 'new editors use the current task language');
+
+const french = create('fr');
+const d = french.onMounted();
+await setImmediate();
+requests.at(-1).resolve(false);
+await d;
+assert.equal(french.access.tuieditor.options.language, 'en', 'locale failure falls back without disabling editing');
+const beforeRetry = requests.length;
+const retry = create('fr').onMounted();
+await setImmediate();
+assert.equal(requests.length, beforeRetry + 1, 'failed locale requests can be retried');
+requests.at(-1).resolve(true);
+await retry;
+assert.equal(editors.at(-1).options.language, 'fr-FR');
+
+const rejected = shared.loadLanguage('de-DE');
+const rejectedWaiter = shared.loadLanguage('de-de');
+requests.at(-1).reject(new Error('external loader rejected'));
+assert.equal(await rejected, false);
+assert.equal(await rejectedWaiter, false, 'external loader errors release all waiters');
+const rejectedRetry = shared.loadLanguage('de-DE');
+requests.at(-1).resolve(true);
+assert.equal(await rejectedRetry, true, 'external errors do not poison the shared cache');
+
+const removed = create('tc');
+const e = removed.onMounted();
+await setImmediate();
+assert.ok(requests.at(-1).url.endsWith('/i18n/zh-tw.min.js'));
+removed.element.remove();
+const count = editors.length;
+requests.at(-1).resolve(true);
+await e;
+assert.equal(editors.length, count, 'removed hosts do not receive late editor instances');
+
+Control = loadControl();
+main = Promise.resolve(null);
+const missing = create('sc');
+const beforeMissing = requests.length;
+await missing.onMounted();
+assert.equal(missing.notInit, true);
+assert.equal(missing.isLoading, false);
+assert.equal(requests.length, beforeMissing, 'a missing main library triggers no locale request');
+console.log('Toast UI cross-task locale requests, reuse, fallback, retries and initialization language passed.');

package/test/vflow.mjs

@@ -0,0 +1,122 @@
+import assert from 'node:assert/strict';
+import { readFile } from 'node:fs/promises';
+import vm from 'node:vm';
+import { JSDOM } from 'jsdom';
+import ts from 'typescript';
+import { getClassPrototype, lang } from '../dist/lib/tool.js';
+
+const dom = new JSDOM('<!doctype html><html><body></body></html>');
+for (const name of ['window', 'document', 'Element', 'HTMLElement', 'SVGElement', 'Node']) {
+    Object.defineProperty(globalThis, name, { configurable: true, value: dom.window[name] });
+}
+Object.defineProperties(HTMLElement.prototype, {
+    offsetWidth: { configurable: true, get: () => 80 },
+    offsetHeight: { configurable: true, get: () => 20 },
+});
+const { createApp, reactive, nextTick, h } = await import('vue');
+const state = reactive({ locale: 'en', direction: 'h', count: 2 });
+const errors = [];
+const watched = [];
+process.on('unhandledRejection', error => { errors.push(error); });
+
+// Keep the framework's computed $el access and component-root mounting order.
+class AbstractControl {
+    get element() { return this.$el; }
+    get locale() { return state.locale; }
+    get localeDirection() { return lang.getDirection(this.locale); }
+    nextTick() { return this.$nextTick(); }
+    watch(...args) { return this.$watch(...args); }
+    emit(...args) { this.$emit(...args); }
+    propInt(name) { return parseInt(this.props[name]); }
+}
+const clickgo = {
+    control: { AbstractControl },
+    dom: {
+        isRtl: el => el instanceof Element && dom.window.getComputedStyle(el).direction === 'rtl',
+        watchStyle: (el, names, callback, immediate) => {
+            assert.ok(el instanceof HTMLElement && el.isConnected, 'style watcher needs a mounted element');
+            watched.push(el);
+            if (immediate) {
+                for (const name of names) callback(name, name === 'font' ? '13px sans-serif' : '0px');
+            }
+        },
+        watchSize() {},
+        unwatchSize() {},
+    },
+};
+const source = await readFile(new URL('../dist/sources/control/vflow/code.ts', import.meta.url), 'utf8');
+const exports = {};
+vm.runInNewContext(ts.transpileModule(source, {
+    compilerOptions: { module: ts.ModuleKind.CommonJS, target: ts.ScriptTarget.ES2022 },
+}).outputText, { exports, require: () => clickgo });
+const instance = new exports.default();
+const prototype = getClassPrototype(instance);
+const layout = await readFile(new URL('../dist/sources/control/vflow/layout.html', import.meta.url), 'utf8');
+const Flow = {
+    template: '<div><slot /></div>',
+    mounted() { this.$emit('clientwidth', 200); this.$emit('clientheight', 100); },
+};
+const Vflow = {
+    template: layout,
+    components: { 'cg-flow': Flow },
+    props: Object.fromEntries(Object.entries(instance.props).map(([name, value]) => [name, {
+        default: () => structuredClone(value),
+    }])),
+    emits: instance.emits,
+    data: () => Object.fromEntries(Object.entries(instance).filter(([name]) => !['props', 'emits'].includes(name))),
+    computed: prototype.access,
+    methods: prototype.method,
+    created() { this.props = this.$props; },
+    async mounted() { await this.$nextTick(); this.onMounted(); },
+};
+const host = document.createElement('div');
+document.body.append(host);
+const app = createApp({
+    render() {
+        return h('div', { dir: lang.getDirection(state.locale) }, [
+            h(Vflow, { ref: 'flow', data: state.count, direction: state.direction }, {
+                default: item => h('span', `Line ${item.row}`),
+            }),
+        ]);
+    },
+});
+app.config.errorHandler = error => { errors.push(error); };
+const root = app.mount(host);
+
+/** --- Drain Vue render, mount and deferred item-size work. --- */
+async function flush() {
+    for (let i = 0; i < 10; ++i) await nextTick();
+    await new Promise(resolve => setImmediate(resolve));
+    assert.deepEqual(errors, [], 'Vflow must mount/update without runtime errors');
+}
+await flush();
+assert.equal(watched.length, 1);
+assert.equal(root.$refs.flow.element, host.querySelector('[direction]'));
+assert.equal(root.$refs.flow.length, 160);
+assert.equal(root.$refs.flow.isRtl, false);
+assert.equal(host.querySelector('.item').style.left, '0px');
+state.count = 102;
+await flush();
+assert.equal(root.$refs.flow.pos.length, 102);
+assert.ok(host.querySelectorAll('.item').length < 102, 'only visible items are rendered');
+state.locale = 'ar';
+await flush();
+assert.equal(root.$refs.flow.isRtl, true);
+assert.equal(host.querySelector('.item').style.left, '');
+assert.equal(host.querySelector('.item').style.right, '0px');
+state.direction = 'v';
+await flush();
+assert.equal(root.$refs.flow.isRtl, false);
+assert.equal(root.$refs.flow.length, 2040);
+state.count = 0;
+await flush();
+assert.equal(root.$refs.flow.pos.length, 0);
+state.count = 2;
+state.direction = 'h';
+state.locale = 'en';
+await flush();
+assert.equal(root.$refs.flow.length, 160);
+assert.equal(host.querySelector('.item').style.left, '0px');
+app.unmount();
+await flush();
+console.log('Vflow real Vue mount, virtualization, data/direction updates and live RTL switching passed.');