|
1 | 1 | const babel = require('@babel/core');
|
2 |
| -const Template7 = require('template7'); |
3 | 2 |
|
4 | 3 | function transformToAst(code) {
|
5 | 4 | const { ast } = babel.transformSync(code, {
|
6 | 5 | ast: true,
|
7 |
| - babelrc: false, |
8 |
| - configFile: false, |
9 | 6 | });
|
10 | 7 | return ast;
|
11 | 8 | }
|
12 | 9 |
|
13 | 10 | function transformFromAst(ast) {
|
14 |
| - const { code } = babel.transformFromAst(ast, '', { |
15 |
| - babelrc: false, |
16 |
| - configFile: false, |
17 |
| - }); |
| 11 | + const { code } = babel.transformFromAst(ast, '', {}); |
18 | 12 | return code;
|
19 | 13 | }
|
20 | 14 |
|
21 |
| -module.exports = ({ |
22 |
| - script, |
23 |
| - template, |
24 |
| - templateType, |
25 |
| - id, |
26 |
| - style, |
27 |
| - styleScoped, |
28 |
| - partials, |
29 |
| -}) => { |
| 15 | +module.exports = ({ script, template, id, style, styleScoped }) => { |
30 | 16 | let astExtend;
|
31 |
| - let isClassComponent = |
32 |
| - script.indexOf('export default class') >= 0 || |
33 |
| - script.indexOf('class extends') >= 0; |
34 |
| - let isClassDeclared; |
35 |
| - let isClassExported; |
36 |
| - let astExtendClass = ` |
37 |
| - class {{PAGE_COMPONENT_CLASS_NAME}} extends Component { |
38 |
| - render() { |
39 |
| - ${ |
40 |
| - templateType === 't7' |
41 |
| - ? `return (${Template7.compile(template)})(this)` |
42 |
| - : `return \`${template}\`` |
43 |
| - } |
44 |
| - } |
| 17 | + const astExtendFunction = ` |
| 18 | + function {{COMPONENT_NAME}}(props, ctx) { |
| 19 | + |
45 | 20 | }
|
46 |
| - {{PAGE_COMPONENT_CLASS_NAME}}.id = '${id}'; |
| 21 | + {{COMPONENT_NAME}}.id = '${id}'; |
47 | 22 | ${
|
48 | 23 | style
|
49 | 24 | ? `
|
50 |
| - {{PAGE_COMPONENT_CLASS_NAME}}.style = \`${style}\`; |
| 25 | + {{COMPONENT_NAME}}.style = \`${style}\`; |
51 | 26 | `.trim()
|
52 | 27 | : ''
|
53 | 28 | }
|
54 |
| - {{PAGE_COMPONENT_CLASS_NAME}}.styleScoped = ${styleScoped}; |
| 29 | + {{COMPONENT_NAME}}.styleScoped = ${styleScoped}; |
55 | 30 |
|
56 |
| - export default {{PAGE_COMPONENT_CLASS_NAME}}; |
57 |
| - `; |
58 |
| - const astExtendObj = ` |
59 |
| - export default { |
60 |
| - id: '${id}', |
61 |
| - ${ |
62 |
| - templateType === 't7' |
63 |
| - ? `render() { return (${Template7.compile(template)})(this)},` |
64 |
| - : `render() {return \`${template}\`},` |
65 |
| - } |
66 |
| - ${style ? `style: \`${style}\`,` : ''} |
67 |
| - styleScoped: ${styleScoped}, |
68 |
| - } |
| 31 | + export default {{COMPONENT_NAME}}; |
69 | 32 | `;
|
70 | 33 |
|
71 |
| - const ast = transformToAst(script); |
| 34 | + const ast = transformToAst( |
| 35 | + `/** @jsx $jsx */\nimport { $jsx } from 'framework7';\n${script}`, |
| 36 | + ); |
72 | 37 |
|
73 | 38 | ast.program.body.forEach((node, index) => {
|
74 |
| - if (node.type === 'ClassDeclaration' && node.superClass) { |
75 |
| - if (isClassExported) return; |
76 |
| - isClassComponent = true; |
77 |
| - isClassDeclared = true; |
78 |
| - astExtendClass = astExtendClass |
79 |
| - .replace('export default {{PAGE_COMPONENT_CLASS_NAME}};', '') |
80 |
| - .replace(/{{PAGE_COMPONENT_CLASS_NAME}}/g, node.id.name); |
81 |
| - astExtend = transformToAst(astExtendClass); |
82 |
| - node.body.body.push(...astExtend.program.body[0].body.body); |
83 |
| - astExtend.program.body.splice(0, 1); // remove fist declaration |
84 |
| - ast.program.body.splice(index + 1, 0, ...astExtend.program.body); // insert component static props |
85 |
| - } |
86 | 39 | if (node.type === 'ExportDefaultDeclaration') {
|
87 |
| - if (isClassComponent) { |
88 |
| - if (isClassDeclared) return; |
89 |
| - isClassExported = true; |
90 |
| - astExtendClass = astExtendClass.replace( |
91 |
| - /{{PAGE_COMPONENT_CLASS_NAME}}/g, |
92 |
| - 'F7PageComponent', |
93 |
| - ); |
94 |
| - astExtend = transformToAst(astExtendClass); |
95 |
| - |
96 |
| - if (node.declaration.type === 'ClassDeclaration') { |
97 |
| - astExtend.program.body[0].superClass = node.declaration.superClass; |
98 |
| - astExtend.program.body[0].body.body.push( |
99 |
| - ...node.declaration.body.body, |
100 |
| - ); |
101 |
| - |
102 |
| - ast.program.body.splice(index, 1); |
103 |
| - ast.program.body.push(...astExtend.program.body); |
104 |
| - } |
105 |
| - } else { |
106 |
| - astExtend = transformToAst(astExtendObj); |
107 |
| - node.declaration.properties.push( |
108 |
| - ...astExtend.program.body[0].declaration.properties, |
| 40 | + if ( |
| 41 | + node.declaration && |
| 42 | + (node.declaration.type === 'ArrowFunctionExpression' || |
| 43 | + node.declaration.type === 'FunctionDeclaration') |
| 44 | + ) { |
| 45 | + astExtend = transformToAst( |
| 46 | + astExtendFunction.replace( |
| 47 | + /{{COMPONENT_NAME}}/g, |
| 48 | + 'framework7Component', |
| 49 | + ), |
109 | 50 | );
|
| 51 | + astExtend.program.body[0].params = node.declaration.params; |
| 52 | + astExtend.program.body[0].body = node.declaration.body; |
| 53 | + ast.program.body.splice(index, 1, ...astExtend.program.body); |
110 | 54 | }
|
111 | 55 | }
|
112 | 56 | });
|
113 | 57 |
|
114 |
| - let code = transformFromAst(ast); |
| 58 | + const code = transformFromAst(ast).replace( |
| 59 | + '$render', |
| 60 | + `function ($$ctx) { |
| 61 | + var $ = $$ctx.$$; |
| 62 | + var $h = $$ctx.$h; |
| 63 | + var $root = $$ctx.$root; |
| 64 | + var $f7 = $$ctx.$f7; |
| 65 | + var $f7route = $$ctx.$f7route; |
| 66 | + var $f7router = $$ctx.$f7router; |
| 67 | + var $theme = $$ctx.$theme; |
| 68 | + var $update = $$ctx.$update; |
| 69 | + var $store = $$ctx.$store; |
115 | 70 |
|
116 |
| - if (templateType === 't7' && code.indexOf('Template7Helpers') >= 0) { |
117 |
| - code = ` |
118 |
| - import Template7 from 'template7'; |
119 |
| - const Template7Helpers = Template7.helpers; |
120 |
| - |
121 |
| - ${partials.join('\n')} |
122 |
| - |
123 |
| - ${code} |
124 |
| - `; |
125 |
| - } |
| 71 | + return $h\`${template}\` |
| 72 | + } |
| 73 | + `, |
| 74 | + ); |
126 | 75 |
|
127 | 76 | return code;
|
128 | 77 | };
|
0 commit comments