Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(@formatjs/cli): support .vue SFC files
- Loading branch information
Showing
13 changed files
with
302 additions
and
40 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import {Opts, transform} from '@formatjs/ts-transformer'; | ||
| import ts from 'typescript'; | ||
|
|
||
| /** | ||
| * Invoid TypeScript module transpilation with our TS transformer | ||
| * @param opts Formatjs TS Transformer opt | ||
| * @param fn filename | ||
| */ | ||
| export function parseScript(opts: Opts, fn?: string) { | ||
| return (source: string) => { | ||
| let output; | ||
| try { | ||
| output = ts.transpileModule(source, { | ||
| compilerOptions: { | ||
| allowJs: true, | ||
| target: ts.ScriptTarget.ESNext, | ||
| noEmit: true, | ||
| experimentalDecorators: true, | ||
| }, | ||
| reportDiagnostics: true, | ||
| fileName: fn, | ||
| transformers: { | ||
| before: [transform(opts)], | ||
| }, | ||
| }); | ||
| } catch (e) { | ||
| e.message = `Error processing file ${fn} | ||
| ${e.message || ''}`; | ||
| throw e; | ||
| } | ||
| if (output.diagnostics) { | ||
| const errs = output.diagnostics.filter( | ||
| d => d.category === ts.DiagnosticCategory.Error | ||
| ); | ||
| if (errs.length) { | ||
| throw new Error( | ||
| ts.formatDiagnosticsWithColorAndContext(errs, { | ||
| getCanonicalFileName: fileName => fileName, | ||
| getCurrentDirectory: () => process.cwd(), | ||
| getNewLine: () => ts.sys.newLine, | ||
| }) | ||
| ); | ||
| } | ||
| } | ||
| }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import {parse} from '@vue/compiler-sfc'; | ||
| import { | ||
| TemplateChildNode, | ||
| NodeTypes, | ||
| SimpleExpressionNode, | ||
| } from '@vue/compiler-core'; | ||
|
|
||
| export type ScriptParseFn = (source: string) => void; | ||
|
|
||
| function walk(node: TemplateChildNode, visitor: (node: any) => void) { | ||
| if ( | ||
| node.type === NodeTypes.TEXT || | ||
| node.type === NodeTypes.COMMENT || | ||
| node.type === NodeTypes.IF || | ||
| node.type === NodeTypes.TEXT_CALL | ||
| ) { | ||
| return; | ||
| } | ||
| visitor(node); | ||
|
|
||
| if (node.type === NodeTypes.INTERPOLATION) { | ||
| visitor(node.content); | ||
| } else { | ||
| node.children.forEach((n: any) => walk(n, visitor)); | ||
| } | ||
| } | ||
|
|
||
| function templateSimpleExpressionNodeVisitor(parseScriptFn: ScriptParseFn) { | ||
| return (n: any) => { | ||
| if (n.type !== NodeTypes.SIMPLE_EXPRESSION) { | ||
| return; | ||
| } | ||
|
|
||
| const {content} = n as SimpleExpressionNode; | ||
| parseScriptFn(content); | ||
| }; | ||
| } | ||
|
|
||
| export function parseFile( | ||
| source: string, | ||
| filename: string, | ||
| parseScriptFn: ScriptParseFn | ||
| ): any { | ||
| const {descriptor, errors} = parse(source, { | ||
| filename, | ||
| }); | ||
| if (errors.length) { | ||
| throw errors[0]; | ||
| } | ||
| const {script, template} = descriptor; | ||
|
|
||
| if (template) { | ||
| walk(template.ast, templateSimpleExpressionNodeVisitor(parseScriptFn)); | ||
| } | ||
|
|
||
| if (script) { | ||
| parseScriptFn(script.content); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| <template> | ||
| <p> | ||
| {{ | ||
| $formatMessage({ | ||
| defaultMessage: 'in template', | ||
| description: 'in template desc', | ||
| }) | ||
| }} | ||
| </p> | ||
| </template> | ||
|
|
||
| <script> | ||
| intl.formatMessage({ | ||
| defaultMessage: 'in script', | ||
| description: 'in script desc', | ||
| }); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import {MessageDescriptor} from '@formatjs/ts-transformer'; | ||
| import {parseScript} from '../../src/parse_script'; | ||
| import {parseFile} from '../../src/vue_extractor'; | ||
|
|
||
| test('vue_extractor', function () { | ||
| let messages: MessageDescriptor[] = []; | ||
|
|
||
| parseFile( | ||
| ` | ||
| <template> | ||
| <p> | ||
| {{ | ||
| $formatMessage({ | ||
| defaultMessage: 'in template', | ||
| description: 'in template desc', | ||
| }) | ||
| }} | ||
| </p> | ||
| </template> | ||
| <script> | ||
| intl.formatMessage({ | ||
| defaultMessage: 'in script', | ||
| description: 'in script desc', | ||
| }); | ||
| </script> | ||
| `, | ||
| 'comp.vue', | ||
| parseScript({ | ||
| additionalFunctionNames: ['$formatMessage'], | ||
| extractFromFormatMessageCall: true, | ||
| onMsgExtracted(_, msgs) { | ||
| messages = messages.concat(msgs); | ||
| }, | ||
| overrideIdFn: '[contenthash:5]', | ||
| }) | ||
| ); | ||
| expect(messages).toEqual([ | ||
| { | ||
| defaultMessage: 'in template', | ||
| description: 'in template desc', | ||
| id: 'f6d14', | ||
| }, | ||
| { | ||
| defaultMessage: 'in script', | ||
| description: 'in script desc', | ||
| id: '1ebd4', | ||
| }, | ||
| ]); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.