@intlify/vue-i18n-extensions 6.0.2 → 6.0.4

package/dist/esm/report.js

@@ -0,0 +1,36 @@
+import { format, isString } from '@intlify/shared';
+// TODO: should be extracted as i18n resources (intlify project self hosting!)
+const ReportMessages = {
+    [1 /* ReportCodes.UNEXPECTED_DIRECTIVE_EXPRESSION */]: `Unexpected directive expression: {0}`,
+    [2 /* ReportCodes.NOT_SUPPORTED */]: `Not supported transform: {0}`,
+    [3 /* ReportCodes.FAILED_VALUE_EVALUATION */]: `Failed value evaluation: {0}`,
+    [4 /* ReportCodes.REQUIRED_PARAMETER */]: `Required parameter: {0}`,
+    [5 /* ReportCodes.INVALID_PARAMETER_TYPE */]: `Required parameter: {0}`,
+    [6 /* ReportCodes.OVERRIDE_ELEMENT_CHILDREN */]: `v-t will override element children: {0}`,
+    [7 /* ReportCodes.NOT_RESOLVED_COMPOSER */]: `Not resolved vue-i18n composer: {0}`,
+    [8 /* ReportCodes.UNEXPECTED_ERROR */]: `Unexpected error: {0}`
+};
+export function getReportMessage(code, ...args) {
+    return format(ReportMessages[code], ...args);
+}
+function createExtensionsError(code, msg, loc) {
+    const error = new SyntaxError(msg);
+    error.code = code;
+    if (loc) {
+        error.loc = loc;
+    }
+    return error;
+}
+export function report(code, options = {}) {
+    const mode = options.mode && isString(options.mode) && ['warn', 'error'].includes(options.mode)
+        ? options.mode
+        : 'warn';
+    const msg = getReportMessage(code, options.args);
+    if (mode === 'warn') {
+        console.warn('[vue-i18n-extensions] ' + msg);
+    }
+    else {
+        // error
+        throw createExtensionsError(code, msg, options.loc);
+    }
+}

package/dist/esm/transform.js

@@ -0,0 +1,359 @@
+import { createSimpleExpression, NodeTypes, isText, BindingTypes, createCompoundExpression, TO_DISPLAY_STRING } from '@vue/compiler-dom';
+import { isNumber, isObject, isString, isSymbol, toDisplayString, hasOwn, isArray } from '@intlify/shared';
+import { evaluateValue, parseVTExpression } from './transpiler';
+import { report } from './report';
+import { createContentBuilder } from './builder';
+/**
+ * Transform `v-t` custom directive
+ *
+ * @remarks
+ * Transform that  `v-t` custom directive is optimized vue-i18n code by Vue compiler.
+ * This transform can improve the performance by pre-translating, and it does support SSR.
+ *
+ * @param options - `v-t` custom directive transform options, see {@link TransformVTDirectiveOptions}
+ * @returns Directive transform
+ *
+ * @example
+ * ```js
+ * import { compile } from '@vue/compiler-dom'
+ * import { createI18n } from 'vue-i18n'
+ * import { transformVTDirective } from '@intlify/vue-i18n-extensions'
+ *
+ * // create i18n instance
+ * const i18n = createI18n({
+ *   locale: 'ja',
+ *   messages: {
+ *     en: {
+ *       hello: 'hello'
+ *     },
+ *     ja: {
+ *       hello: 'こんにちは'
+ *     }
+ *   }
+ * })
+ *
+ * // get transform from  `transformVTDirective` function, with `i18n` option
+ * const transformVT = transformVTDirective({ i18n })
+ *
+ * const { code } = compile(`<p v-t="'hello'"></p>`, {
+ *   mode: 'function',
+ *   hoistStatic: true,
+ *   prefixIdentifiers: true,
+ *   directiveTransforms: { t: transformVT } // <- you need to specify to `directiveTransforms` option!
+ * })
+ *
+ * console.log(code)
+ * // output ->
+ * //   const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue
+ * //   return function render(_ctx, _cache) {
+ * //     return (_openBlock(), _createBlock(\\"div\\", null, \\"こんにちは！\\"))
+ * //   }
+ * ```
+ * @public
+ */
+export function transformVTDirective(options = {}) {
+    const i18nInstance = options.i18n;
+    const mode = isString(options.mode) && ['composition', 'legacy'].includes(options.mode)
+        ? options.mode
+        : 'composition';
+    // prettier-ignore
+    const translationSignatures = isString(options.translationSignatures)
+        ? [options.translationSignatures]
+        : isArray(options.translationSignatures)
+            ? options.translationSignatures
+            : ['t'];
+    translationSignatures.push(`$t`); // fallback to global scope
+    return (dir, node, context) => {
+        const { exp, loc } = dir;
+        // console.log('v-t dir', dir)
+        // console.log('v-t node', node)
+        if (!exp) {
+            // TODO: throw error with context.OnError
+            // NOTE: We need to support from @vue/compiler-core
+            // https://github.com/vuejs/vue-next/issues/1147
+            report(1 /* ReportCodes.UNEXPECTED_DIRECTIVE_EXPRESSION */, {
+                mode: 'error',
+                args: [node.loc.source || ''],
+                loc: node.loc
+            });
+        }
+        if (node.children.length > 0) {
+            // TODO: throw error with context.OnError
+            // NOTE: We need to support from @vue/compiler-core
+            // https://github.com/vuejs/vue-next/issues/1147
+            report(6 /* ReportCodes.OVERRIDE_ELEMENT_CHILDREN */, {
+                mode: 'error',
+                args: [node.loc.source || ''],
+                loc: node.loc
+            });
+            node.children.length = 0;
+        }
+        if (isSimpleExpressionNode(exp)) {
+            if (isConstant(exp) && i18nInstance) {
+                const { status, value } = evaluateValue(exp.content);
+                if (status === 'ng') {
+                    report(3 /* ReportCodes.FAILED_VALUE_EVALUATION */, {
+                        args: [node.loc.source || ''],
+                        loc: node.loc
+                    });
+                    return { props: [] };
+                }
+                const [parsedValue, parseStatus] = parseValue(value);
+                if (parseStatus !== 0 /* ReportCodes.SUCCESS */) {
+                    report(parseStatus, { args: [node.loc.source || ''], loc: node.loc });
+                    return { props: [] };
+                }
+                if (parsedValue == null) {
+                    report(8 /* ReportCodes.UNEXPECTED_ERROR */, {
+                        args: [node.loc.source || ''],
+                        loc: node.loc
+                    });
+                    return { props: [] };
+                }
+                const global = getComposer(i18nInstance);
+                if (global == null) {
+                    report(7 /* ReportCodes.NOT_RESOLVED_COMPOSER */, {
+                        args: [node.loc.source || ''],
+                        loc: node.loc
+                    });
+                    return { props: [] };
+                }
+                const content = global.t(...makeParams(parsedValue));
+                node.children.push({
+                    type: NodeTypes.TEXT,
+                    content
+                });
+                return { props: [] };
+            }
+            else {
+                const translationParams = parseVTExpression(exp.content);
+                const code = generateTranslationCode(context, mode, translationParams, translationSignatures);
+                context.helper(TO_DISPLAY_STRING);
+                node.children.push({
+                    type: NodeTypes.INTERPOLATION,
+                    content: createCompoundExpression([
+                        createSimpleExpression(code, false, loc, 0 /* ConstantTypes.NOT_CONSTANT */)
+                    ])
+                });
+                return { props: [] };
+            }
+        }
+        else if (isCompoundExpressionNode(exp)) {
+            const content = exp.children.map(mapNodeContentHandler).join('');
+            const code = generateTranslationCode(context, mode, parseVTExpression(content), translationSignatures);
+            context.helper(TO_DISPLAY_STRING);
+            node.children.push({
+                type: NodeTypes.INTERPOLATION,
+                content: createCompoundExpression([
+                    createSimpleExpression(code, false, loc, 0 /* ConstantTypes.NOT_CONSTANT */)
+                ])
+            });
+            return { props: [] };
+        }
+        else {
+            report(2 /* ReportCodes.NOT_SUPPORTED */, {
+                args: [node.loc.source || ''],
+                loc: node.loc
+            });
+            return { props: [] };
+        }
+    };
+}
+function getComposer(i18n) {
+    return isI18nInstance(i18n) ? getComposerInternal(i18n) : null;
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function isI18nInstance(i18n) {
+    return i18n != null && 'global' in i18n && 'mode' in i18n;
+}
+function getComposerInternal(i18n) {
+    if (i18n.mode === 'composition') {
+        return isComposer(i18n.global) ? i18n.global : null;
+    }
+    else {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
+        return isVueI18n(i18n.global) ? i18n.global.__composer : null;
+    }
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function isComposer(target) {
+    return target != null && !('__composer' in target);
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function isVueI18n(target) {
+    return target != null && '__composer' in target;
+}
+function isSimpleExpressionNode(node) {
+    return node != null && node.type === NodeTypes.SIMPLE_EXPRESSION;
+}
+function isCompoundExpressionNode(node) {
+    return node != null && node.type === NodeTypes.COMPOUND_EXPRESSION;
+}
+function isConstant(node) {
+    if ('isConstant' in node) {
+        // for v3.0.3 earlier
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
+        return node.isConstant;
+    }
+    else if ('constType' in node) {
+        // for v3.0.3 or later
+        return node.constType <= 3 /* ConstantTypes.CAN_STRINGIFY */;
+    }
+    else {
+        throw Error('unexpected error in Vue SimpleExpressionNode');
+    }
+}
+function mapNodeContentHandler(value) {
+    if (isString(value)) {
+        return value;
+    }
+    else if (isSymbol(value)) {
+        return value.description || '';
+    }
+    else if (isSimpleExpressionNode(value)) {
+        return value.content;
+    }
+    else if (isCompoundExpressionNode(value)) {
+        return value.children.map(mapNodeContentHandler).join('');
+    }
+    else if (isText(value)) {
+        if (isString(value.content)) {
+            return value.content;
+        }
+        else if (isSimpleExpressionNode(value.content)) {
+            return value.content.content;
+        }
+        else if (isCompoundExpressionNode(value.content)) {
+            return value.content.children.map(mapNodeContentHandler).join('');
+        }
+        else {
+            return '';
+        }
+    }
+    else {
+        return '';
+    }
+}
+function parseValue(value) {
+    if (isString(value)) {
+        return [{ path: value }, 0 /* ReportCodes.SUCCESS */];
+    }
+    else if (isObject(value)) {
+        if (!('path' in value)) {
+            return [null, 4 /* ReportCodes.REQUIRED_PARAMETER */];
+        }
+        return [value, 0 /* ReportCodes.SUCCESS */];
+    }
+    else {
+        return [null, 5 /* ReportCodes.INVALID_PARAMETER_TYPE */];
+    }
+}
+function makeParams(value) {
+    const { path, locale, args, choice, plural } = value;
+    const options = {};
+    const named = args || {};
+    if (isString(locale)) {
+        options.locale = locale;
+    }
+    if (isNumber(choice)) {
+        options.plural = choice;
+    }
+    if (isNumber(plural)) {
+        options.plural = plural;
+    }
+    return [path, named, options];
+}
+function generateTranslationCode(context, mode, params, translationSignatures) {
+    return mode === 'composition'
+        ? generateComposableCode(context, params, translationSignatures)
+        : generateLegacyCode(context, params);
+}
+function generateTranslationCallableSignatures(context, translationSignatures) {
+    const { prefixIdentifiers, bindingMetadata } = context;
+    return translationSignatures
+        .map(signature => {
+        const type = hasOwn(bindingMetadata, signature) && bindingMetadata[signature];
+        const bindingContext = prefixIdentifiers
+            ? (type && type.startsWith('setup')) || type === BindingTypes.LITERAL_CONST
+                ? '$setup.'
+                : '_ctx.'
+            : '';
+        return `${bindingContext}${signature}`;
+    })
+        .join(' || ');
+}
+function generateComposableCode(context, params, translationSignatures) {
+    const baseCode = `(${generateTranslationCallableSignatures(context, translationSignatures)})`;
+    const builder = createContentBuilder();
+    builder.push(`${baseCode}(`);
+    // generate path
+    builder.push(`${toDisplayString(params.path)}`);
+    // generate named
+    builder.push(`, { `);
+    generateNamedCode(builder, params.named);
+    builder.push(` }`);
+    // generate options
+    builder.push(`, { `);
+    if (params.options.locale) {
+        builder.push(`locale: ${toDisplayString(params.options.locale)}`);
+    }
+    if (params.options.plural) {
+        if (params.options.locale) {
+            builder.push(', ');
+        }
+        builder.push(`plural: ${toDisplayString(params.options.plural)}`);
+    }
+    builder.push(` }`);
+    builder.push(`)`);
+    const content = builder.content;
+    return content;
+}
+function generateNamedCode(builder, named) {
+    const keys = Object.keys(named);
+    keys.forEach(k => {
+        const v = named[k];
+        if (isObject(v)) {
+            builder.push(`${k}: { `);
+            generateNamedCode(builder, v);
+            builder.push(` }`);
+        }
+        else {
+            builder.push(`${k}: ${toDisplayString(v)}`);
+        }
+    });
+}
+function generateLegacyCode(context, params) {
+    const mode = !params.options.plural ? 'basic' : 'plural';
+    const baseCode = `${context.prefixIdentifiers ? '_ctx.' : ''}${mode === 'basic' ? '$t' : '$tc'}`;
+    const builder = createContentBuilder();
+    builder.push(`${baseCode}(`);
+    // generate path
+    builder.push(`${toDisplayString(params.path)}`);
+    if (mode === 'basic') {
+        // generate locale
+        if (isString(params.options.locale)) {
+            builder.push(`, ${toDisplayString(params.options.locale)}`);
+        }
+        // generate named
+        builder.push(`, { `);
+        generateNamedCode(builder, params.named);
+        builder.push(` }`);
+    }
+    else {
+        // generate plural
+        builder.push(`, ${toDisplayString(params.options.plural)}`);
+        if (isString(params.options.locale)) {
+            // generate locale
+            builder.push(`, ${toDisplayString(params.options.locale)}`);
+        }
+        else {
+            // generate named
+            builder.push(`, { `);
+            generateNamedCode(builder, params.named);
+            builder.push(` }`);
+        }
+    }
+    builder.push(`)`);
+    const content = builder.content;
+    return content;
+}

package/dist/esm/transpiler.js

@@ -0,0 +1,129 @@
+import { parse } from '@babel/parser';
+export function evaluateValue(expression) {
+    const ret = { status: 'ng', value: undefined };
+    try {
+        const ast = parse(`const a = ${expression.trim()}`);
+        if (ast.program.body.length >= 1 &&
+            ast.program.body[0].type === 'VariableDeclaration' &&
+            ast.program.body[0].declarations.length >= 1) {
+            const node = ast.program.body[0].declarations[0].init;
+            if (node != null && (node.type === 'StringLiteral' || node.type === 'ObjectExpression')) {
+                // eslint-disable-next-line @typescript-eslint/no-implied-eval
+                const val = new Function(`return ${expression.trim()} `)();
+                ret.status = 'ok';
+                ret.value = val;
+            }
+        }
+        // eslint-disable-next-line no-empty
+    }
+    catch (_e) { }
+    return ret;
+}
+export function parseVTExpression(expression) {
+    const ret = {
+        path: '',
+        named: {},
+        options: {}
+    };
+    try {
+        const ast = parse(`const a = ${expression.trim()}`);
+        if (ast.program.body.length >= 1 &&
+            ast.program.body[0].type === 'VariableDeclaration' &&
+            ast.program.body[0].declarations.length >= 1) {
+            const node = ast.program.body[0].declarations[0].init;
+            if (node != null) {
+                if (node.type === 'StringLiteral' && node.extra) {
+                    ret.path = node.extra.raw;
+                }
+                else if (node.type === 'Identifier') {
+                    ret.path = node.name;
+                }
+                else if (node.type === 'MemberExpression') {
+                    ret.path = getObjectMemberValue(node);
+                }
+                else if (node.type === 'ObjectExpression') {
+                    node.properties.forEach(propNode => {
+                        if (propNode.type === 'ObjectProperty') {
+                            const propKeyNode = propNode.key;
+                            if (propKeyNode.type !== 'Identifier') {
+                                return;
+                            }
+                            const propValueNode = propNode.value;
+                            switch (propKeyNode.name) {
+                                case 'path':
+                                    ret.path = getObjectMemberValue(propValueNode);
+                                    break;
+                                case 'locale':
+                                    ret.options.locale = getObjectMemberValue(propValueNode);
+                                    break;
+                                case 'choice':
+                                case 'plural':
+                                    ret.options.plural = getObjectMemberValue(propValueNode);
+                                    break;
+                                case 'args':
+                                    // console.log('args', propValueNode)
+                                    if (propValueNode.type === 'ObjectExpression') {
+                                        traverseObjectMember(propValueNode, ret.named);
+                                    }
+                                    break;
+                                default:
+                                    break;
+                            }
+                        }
+                    });
+                }
+            }
+        }
+        // eslint-disable-next-line no-empty
+    }
+    catch (_e) { }
+    return ret;
+}
+function getObjectMemberValue(node) {
+    if ((node.type === 'StringLiteral' || node.type === 'NumericLiteral') && node.extra) {
+        return node.extra.raw;
+    }
+    else if (node.type === 'Identifier') {
+        return node.name;
+    }
+    else if (node.type === 'MemberExpression') {
+        const paths = [];
+        collectMemberPath(node, paths);
+        paths.reverse();
+        return paths.join('.');
+    }
+    else {
+        return '';
+    }
+}
+function traverseObjectMember(node, target) {
+    node.properties.forEach(propNode => {
+        if (propNode.type === 'ObjectProperty') {
+            const propKeyNode = propNode.key;
+            if (propKeyNode.type !== 'Identifier') {
+                return;
+            }
+            if (!(propKeyNode.name in target)) {
+                target[propKeyNode.name] = {};
+            }
+            // console.log('propNode', propNode)
+            const propValueNode = propNode.value;
+            if (propValueNode.type === 'ObjectExpression') {
+                traverseObjectMember(propValueNode, target[propKeyNode.name]);
+            }
+            else {
+                target[propKeyNode.name] = getObjectMemberValue(propValueNode);
+            }
+        }
+    });
+}
+function collectMemberPath(node, paths) {
+    if (node.type === 'Identifier') {
+        paths.push(node.name);
+        return;
+    }
+    else if (node.type === 'MemberExpression' && node.property.type === 'Identifier') {
+        paths.push(node.property.name);
+        return collectMemberPath(node.object, paths);
+    }
+}

package/dist/vue-i18n-extensions.d.ts

@@ -0,0 +1,97 @@
+import type { DirectiveTransform } from '@vue/compiler-dom';
+import type { I18n } from 'vue-i18n';
+import type { I18nMode } from 'vue-i18n';
+
+/**
+ * Transform `v-t` custom directive
+ *
+ * @remarks
+ * Transform that  `v-t` custom directive is optimized vue-i18n code by Vue compiler.
+ * This transform can improve the performance by pre-translating, and it does support SSR.
+ *
+ * @param options - `v-t` custom directive transform options, see {@link TransformVTDirectiveOptions}
+ * @returns Directive transform
+ *
+ * @example
+ * ```js
+ * import { compile } from '@vue/compiler-dom'
+ * import { createI18n } from 'vue-i18n'
+ * import { transformVTDirective } from '@intlify/vue-i18n-extensions'
+ *
+ * // create i18n instance
+ * const i18n = createI18n({
+ *   locale: 'ja',
+ *   messages: {
+ *     en: {
+ *       hello: 'hello'
+ *     },
+ *     ja: {
+ *       hello: 'こんにちは'
+ *     }
+ *   }
+ * })
+ *
+ * // get transform from  `transformVTDirective` function, with `i18n` option
+ * const transformVT = transformVTDirective({ i18n })
+ *
+ * const { code } = compile(`<p v-t="'hello'"></p>`, {
+ *   mode: 'function',
+ *   hoistStatic: true,
+ *   prefixIdentifiers: true,
+ *   directiveTransforms: { t: transformVT } // <- you need to specify to `directiveTransforms` option!
+ * })
+ *
+ * console.log(code)
+ * // output ->
+ * //   const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock } = Vue
+ * //   return function render(_ctx, _cache) {
+ * //     return (_openBlock(), _createBlock(\\"div\\", null, \\"こんにちは！\\"))
+ * //   }
+ * ```
+ * @public
+ */
+export declare function transformVTDirective<Messages extends Record<string, unknown> = {}, // eslint-disable-line @typescript-eslint/ban-types -- TODO: fix this
+DateTimeFormats extends Record<string, unknown> = {}, // eslint-disable-line @typescript-eslint/ban-types -- TODO: fix this
+NumberFormats extends Record<string, unknown> = {}, // eslint-disable-line @typescript-eslint/ban-types -- TODO: fix this
+Legacy extends boolean = true>(options?: TransformVTDirectiveOptions<Messages, DateTimeFormats, NumberFormats, Legacy>): DirectiveTransform;
+
+/**
+ * Transform options for `v-t` custom directive
+ *
+ * @public
+ */
+export declare interface TransformVTDirectiveOptions<Messages extends Record<string, unknown> = {}, // eslint-disable-line @typescript-eslint/ban-types -- TODO: fix this
+DateTimeFormats extends Record<string, unknown> = {}, // eslint-disable-line @typescript-eslint/ban-types -- TODO: fix this
+NumberFormats extends Record<string, unknown> = {}, // eslint-disable-line @typescript-eslint/ban-types -- TODO: fix this
+Legacy extends boolean = true> {
+    /**
+     * I18n instance
+     *
+     * @remarks
+     * If this option is specified, `v-t` custom directive transform uses an I18n instance to pre-translate.
+     * The translation will use the global resources registered in the I18n instance,
+     * that is, `v-t` directive transform is also a limitation that the resources of each component cannot be used.
+     */
+    i18n?: I18n<Messages, DateTimeFormats, NumberFormats, Legacy>;
+    /**
+     * I18n Mode
+     *
+     * @remarks
+     * Specify the API style of vue-i18n. If you use legacy API style (e.g. `$t`) at vue-i18n, you need to specify `legacy`.
+     *
+     * @default 'composition'
+     */
+    mode?: I18nMode;
+    /**
+     * Translation function signatures
+     *
+     * @remarks
+     * You can specify the signature of the translation function attached to the binding context when it is codegen in the Vue Compiler.
+     * If you have changed the signature to a non `t` signature in the `setup` hook or `<script setup>`, you can safely SSR it.
+     * If each Vue component has a different signature for the translation function, you can specify several in an array for safe SSR.
+     * This option value is `undefined` and the signature attached to the binding context is `t`.
+     */
+    translationSignatures?: string | string[];
+}
+
+export { }