From 6f636505d7ad71b316e994390327aeec6d84f3a3 Mon Sep 17 00:00:00 2001 From: Daniel Cherubini Date: Wed, 30 Aug 2017 12:01:09 +0200 Subject: [PATCH 1/8] init commit --- src/parser/component.js | 22 +++++++++++++--------- src/parser/script.js | 18 +++++++++++++----- src/utils/require.js | 14 ++++++++++++-- 3 files changed, 38 insertions(+), 16 deletions(-) diff --git a/src/parser/component.js b/src/parser/component.js index 9f5cfff..f9b5be6 100644 --- a/src/parser/component.js +++ b/src/parser/component.js @@ -13,13 +13,14 @@ function componentParser(templatePath: string, defaults: Object, type: string, C // try to get the component content from the cache const cachedComponentContentObject = Cache.get(templatePath); if (cachedComponentContentObject) { - scriptParser(cachedComponentContentObject.parsedContent.script, defaults, type, Cache).then(parsedScriptObject => { - cachedComponentContentObject.script = parsedScriptObject; - cachedComponentContentObject.script.template = cachedComponentContentObject.template; - resolve(cachedComponentContentObject); - }).catch(error => { - reject(error); - }); + scriptParser(cachedComponentContentObject.parsedContent.script, defaults, type, Cache) + .then(parsedScriptObject => { + cachedComponentContentObject.script = parsedScriptObject.script; + cachedComponentContentObject.script.template = cachedComponentContentObject.template; + resolve(cachedComponentContentObject); + }).catch(error => { + reject(error); + }); } else { fs.readFile(templatePath, 'utf-8', function (err, content) { if (err) { @@ -64,7 +65,10 @@ function parseContent(content: string, templatePath: string, defaults: Object, t Promise.all(promiseArray).then(resultsArray => { const template = resultsArray[0]; const script = resultsArray[1]; - const style = resultsArray[2]; + let style = resultsArray[2]; + + //join the styles together from the ones found in the components + style += script.style; script.template = template; @@ -74,7 +78,7 @@ function parseContent(content: string, templatePath: string, defaults: Object, t type: type, style: style, name: camelCase(templateName), - script: script + script: script.script }; resolve(componentObjectCTOR); }).catch(error => { diff --git a/src/parser/script.js b/src/parser/script.js index 4a7b530..fa1368a 100644 --- a/src/parser/script.js +++ b/src/parser/script.js @@ -63,7 +63,11 @@ function scriptParser(scriptObject: ScriptObjectType, defaults: Object, type: st const cachedBabelScript = Cache.get(cacheKey); if (cachedBabelScript) { const finalScript = dataMerge(cachedBabelScript, defaults, type); - resolve(finalScript); + const finalObject = { + script: finalScript, + style: cachedBabelScript.style + }; + resolve(finalObject); } else { const babelScript = babel.transform(scriptObject.content, options); // const filename = path.join(defaults.rootPath, '/', defaults.component); @@ -72,12 +76,16 @@ function scriptParser(scriptObject: ScriptObjectType, defaults: Object, type: st defaults: defaults }; Utils.requireFromString(babelScript.code, defaults.component, requireFromStringOptions, Cache) - .then(scriptFromString => { + .then(requiredObject => { // set the cache for the babel script string - Cache.set(cacheKey, scriptFromString); + Cache.set(cacheKey, requiredObject); - const finalScript = dataMerge(scriptFromString, defaults, type); - resolve(finalScript); + const finalScript = dataMerge(requiredObject.code, defaults, type); + const finalObject = { + script: finalScript, + style: requiredObject.style + }; + resolve(finalObject); }) .catch(error => reject(error)); } diff --git a/src/utils/require.js b/src/utils/require.js index bda0d54..fcdca03 100644 --- a/src/utils/require.js +++ b/src/utils/require.js @@ -78,6 +78,7 @@ function replaceRelativePaths(code: string, rootPath: string): string { function requireFromString(code: string, filename: string = '', optsObj: Object = {}, Cache: Object): Promise < Object > { return new Promise((resolve, reject) => { const options = new Options(optsObj); + let style = ''; let promiseArray = []; if (typeof code !== 'string') { @@ -107,12 +108,17 @@ function requireFromString(code: string, filename: string = '', optsObj: Object for (var renderedItem of renderedItemArray) { const rawString = renderedItem.rendered.scriptStringRaw; code = code.replace(renderedItem.match, rawString); + style += renderedItem.rendered.style; } //check if its the last element and then render const last_element = code.match(options.vueFileRegex); if (last_element === undefined || last_element === null) { m._compile(code, filename); - resolve(m.exports.default); + const resolvedObject = { + code: m.exports.default, + style: style + }; + resolve(resolvedObject); } }) .catch(error => { @@ -120,7 +126,11 @@ function requireFromString(code: string, filename: string = '', optsObj: Object }); } else { m._compile(code, filename); - resolve(m.exports.default); + const resolvedObject = { + code: m.exports.default, + style: style + }; + resolve(resolvedObject); } }); } From 394ca2f0dd9bbc7869711145930f267b8be50839 Mon Sep 17 00:00:00 2001 From: Daniel Cherubini Date: Wed, 30 Aug 2017 12:09:32 +0200 Subject: [PATCH 2/8] partially works, broken --- src/parser/component.js | 6 +++--- src/utils/require.js | 4 +++- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/parser/component.js b/src/parser/component.js index f9b5be6..abd4d66 100644 --- a/src/parser/component.js +++ b/src/parser/component.js @@ -64,11 +64,11 @@ function parseContent(content: string, templatePath: string, defaults: Object, t Promise.all(promiseArray).then(resultsArray => { const template = resultsArray[0]; - const script = resultsArray[1]; + const script = resultsArray[1].script; let style = resultsArray[2]; //join the styles together from the ones found in the components - style += script.style; + style += resultsArray[1].style; script.template = template; @@ -78,7 +78,7 @@ function parseContent(content: string, templatePath: string, defaults: Object, t type: type, style: style, name: camelCase(templateName), - script: script.script + script: script }; resolve(componentObjectCTOR); }).catch(error => { diff --git a/src/utils/require.js b/src/utils/require.js index fcdca03..a6854fe 100644 --- a/src/utils/require.js +++ b/src/utils/require.js @@ -108,7 +108,9 @@ function requireFromString(code: string, filename: string = '', optsObj: Object for (var renderedItem of renderedItemArray) { const rawString = renderedItem.rendered.scriptStringRaw; code = code.replace(renderedItem.match, rawString); - style += renderedItem.rendered.style; + if (renderedItem.rendered.style) { + style += renderedItem.rendered.style; + } } //check if its the last element and then render const last_element = code.match(options.vueFileRegex); From 93f6e472ea648d571f37c1e68b1af86ba80632a6 Mon Sep 17 00:00:00 2001 From: Nick Fytros Date: Wed, 30 Aug 2017 21:03:42 +0200 Subject: [PATCH 3/8] styles are working. looking for a better solution --- .vscode/launch.json | 8 ++++++-- example/components/uuid.vue | 2 +- example/components/uuid2.vue | 6 +++--- example/vueFiles/components/uuid.vue | 20 -------------------- example/vueFiles/components/uuid2.vue | 20 -------------------- example/vueFiles/mixins/exampleMixin.js | 10 ---------- src/parser/component.js | 9 ++++++++- src/utils/require.js | 3 +++ 8 files changed, 21 insertions(+), 57 deletions(-) delete mode 100644 example/vueFiles/components/uuid.vue delete mode 100644 example/vueFiles/components/uuid2.vue delete mode 100644 example/vueFiles/mixins/exampleMixin.js diff --git a/.vscode/launch.json b/.vscode/launch.json index ece0aaa..062a1b0 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -3,13 +3,17 @@ // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.2.0", - "configurations": [{ + "configurations": [ + + { "name": "Attach to Process", "type": "node", "request": "attach", "port": 9229, "protocol": "inspector", - "restart": true + "restart": true, + "outFiles": ["${workspaceRoot}/lib"], + "sourceMaps": true }, { "type": "node", diff --git a/example/components/uuid.vue b/example/components/uuid.vue index e4e7d6c..efe7450 100644 --- a/example/components/uuid.vue +++ b/example/components/uuid.vue @@ -1,7 +1,7 @@ diff --git a/example/components/uuid2.vue b/example/components/uuid2.vue index 1a007d3..6cf46ec 100644 --- a/example/components/uuid2.vue +++ b/example/components/uuid2.vue @@ -1,6 +1,6 @@ @@ -14,7 +14,7 @@ export default { diff --git a/example/vueFiles/components/uuid.vue b/example/vueFiles/components/uuid.vue deleted file mode 100644 index 99e296f..0000000 --- a/example/vueFiles/components/uuid.vue +++ /dev/null @@ -1,20 +0,0 @@ - - - - - diff --git a/example/vueFiles/components/uuid2.vue b/example/vueFiles/components/uuid2.vue deleted file mode 100644 index 1a007d3..0000000 --- a/example/vueFiles/components/uuid2.vue +++ /dev/null @@ -1,20 +0,0 @@ - - - - - diff --git a/example/vueFiles/mixins/exampleMixin.js b/example/vueFiles/mixins/exampleMixin.js deleted file mode 100644 index b89cc67..0000000 --- a/example/vueFiles/mixins/exampleMixin.js +++ /dev/null @@ -1,10 +0,0 @@ -const exampleMixin = { - methods: { - hello: function () { - console.log('Hello'); - } - } -}; - -module.exports = exampleMixin; -exports.default = exampleMixin; diff --git a/src/parser/component.js b/src/parser/component.js index 9f5cfff..15cd4a8 100644 --- a/src/parser/component.js +++ b/src/parser/component.js @@ -16,6 +16,7 @@ function componentParser(templatePath: string, defaults: Object, type: string, C scriptParser(cachedComponentContentObject.parsedContent.script, defaults, type, Cache).then(parsedScriptObject => { cachedComponentContentObject.script = parsedScriptObject; cachedComponentContentObject.script.template = cachedComponentContentObject.template; + cachedComponentContentObject.styles = parsedScriptObject.styles; resolve(cachedComponentContentObject); }).catch(error => { reject(error); @@ -64,7 +65,13 @@ function parseContent(content: string, templatePath: string, defaults: Object, t Promise.all(promiseArray).then(resultsArray => { const template = resultsArray[0]; const script = resultsArray[1]; - const style = resultsArray[2]; + // console.log(resultsArray[2]); + let style = ''; + if (resultsArray[2]) { + style = resultsArray[2]; + } else { + style = resultsArray[1].styles ? resultsArray[1].styles : ''; + } script.template = template; diff --git a/src/utils/require.js b/src/utils/require.js index bda0d54..a2a28f1 100644 --- a/src/utils/require.js +++ b/src/utils/require.js @@ -104,14 +104,17 @@ function requireFromString(code: string, filename: string = '', optsObj: Object } Promise.all(promiseArray) .then(renderedItemArray => { + let styles = ''; for (var renderedItem of renderedItemArray) { const rawString = renderedItem.rendered.scriptStringRaw; code = code.replace(renderedItem.match, rawString); + styles += renderedItem.rendered.layout.style; } //check if its the last element and then render const last_element = code.match(options.vueFileRegex); if (last_element === undefined || last_element === null) { m._compile(code, filename); + m.exports.default.styles = styles; resolve(m.exports.default); } }) From 63823fe54ee43695e900a6f9f35db1d2555ba827 Mon Sep 17 00:00:00 2001 From: Nick Fytros Date: Wed, 30 Aug 2017 21:13:27 +0200 Subject: [PATCH 4/8] fixed problems with previous solution --- src/parser/script.js | 18 +++++------------- src/utils/require.js | 7 +------ 2 files changed, 6 insertions(+), 19 deletions(-) diff --git a/src/parser/script.js b/src/parser/script.js index fa1368a..4a7b530 100644 --- a/src/parser/script.js +++ b/src/parser/script.js @@ -63,11 +63,7 @@ function scriptParser(scriptObject: ScriptObjectType, defaults: Object, type: st const cachedBabelScript = Cache.get(cacheKey); if (cachedBabelScript) { const finalScript = dataMerge(cachedBabelScript, defaults, type); - const finalObject = { - script: finalScript, - style: cachedBabelScript.style - }; - resolve(finalObject); + resolve(finalScript); } else { const babelScript = babel.transform(scriptObject.content, options); // const filename = path.join(defaults.rootPath, '/', defaults.component); @@ -76,16 +72,12 @@ function scriptParser(scriptObject: ScriptObjectType, defaults: Object, type: st defaults: defaults }; Utils.requireFromString(babelScript.code, defaults.component, requireFromStringOptions, Cache) - .then(requiredObject => { + .then(scriptFromString => { // set the cache for the babel script string - Cache.set(cacheKey, requiredObject); + Cache.set(cacheKey, scriptFromString); - const finalScript = dataMerge(requiredObject.code, defaults, type); - const finalObject = { - script: finalScript, - style: requiredObject.style - }; - resolve(finalObject); + const finalScript = dataMerge(scriptFromString, defaults, type); + resolve(finalScript); }) .catch(error => reject(error)); } diff --git a/src/utils/require.js b/src/utils/require.js index edb3671..9809e4c 100644 --- a/src/utils/require.js +++ b/src/utils/require.js @@ -78,7 +78,6 @@ function replaceRelativePaths(code: string, rootPath: string): string { function requireFromString(code: string, filename: string = '', optsObj: Object = {}, Cache: Object): Promise < Object > { return new Promise((resolve, reject) => { const options = new Options(optsObj); - let style = ''; let promiseArray = []; if (typeof code !== 'string') { @@ -126,11 +125,7 @@ function requireFromString(code: string, filename: string = '', optsObj: Object }); } else { m._compile(code, filename); - const resolvedObject = { - code: m.exports.default, - style: style - }; - resolve(resolvedObject); + resolve(m.exports.default); } }); } From 5d988cfafb7075657b7793ba8a847d45f72598e2 Mon Sep 17 00:00:00 2001 From: Nick Fytros Date: Wed, 30 Aug 2017 21:26:00 +0200 Subject: [PATCH 5/8] removed unused comment --- src/parser/component.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/parser/component.js b/src/parser/component.js index 15cd4a8..585f3d0 100644 --- a/src/parser/component.js +++ b/src/parser/component.js @@ -65,7 +65,6 @@ function parseContent(content: string, templatePath: string, defaults: Object, t Promise.all(promiseArray).then(resultsArray => { const template = resultsArray[0]; const script = resultsArray[1]; - // console.log(resultsArray[2]); let style = ''; if (resultsArray[2]) { style = resultsArray[2]; From 281c48dfe029616806ad4d865a2c96f5838ecc79 Mon Sep 17 00:00:00 2001 From: Nick Fytros Date: Wed, 30 Aug 2017 22:01:11 +0200 Subject: [PATCH 6/8] fixed tests. Removed duplicate files in the example project. Fixed the example project with the new folders --- example/app.js | 4 ++-- example/components/uuid.vue | 2 +- example/{vueFiles => }/main.vue | 0 example/vueFiles/main/main.vue | 37 --------------------------------- src/parser/component.js | 3 ++- tests/index.js | 6 +++--- tests/parser/index.js | 4 ++-- tests/utils/checkPathUtils.js | 4 ++-- 8 files changed, 12 insertions(+), 48 deletions(-) rename example/{vueFiles => }/main.vue (100%) delete mode 100644 example/vueFiles/main/main.vue diff --git a/example/app.js b/example/app.js index d418ab3..a47ceff 100644 --- a/example/app.js +++ b/example/app.js @@ -15,7 +15,7 @@ var exampleMixin = { }; const options = { - rootPath: path.join(__dirname, '/vueFiles'), + rootPath: path.join(__dirname, ''), vue: { head: { meta: [{ @@ -66,7 +66,7 @@ app.get('/', (req, res) => { ] } } - res.renderVue('main/main.vue', data, vueOptions) + res.renderVue('main.vue', data, vueOptions) }); app.listen(3000); diff --git a/example/components/uuid.vue b/example/components/uuid.vue index efe7450..5bc401a 100644 --- a/example/components/uuid.vue +++ b/example/components/uuid.vue @@ -6,7 +6,7 @@ - - diff --git a/src/parser/component.js b/src/parser/component.js index 585f3d0..06e9491 100644 --- a/src/parser/component.js +++ b/src/parser/component.js @@ -3,6 +3,7 @@ const fs = require('fs'); const camelCase = require('camel-case'); const compiler = require('vue-template-compiler'); +const CleanCSS = require('clean-css'); const styleParser = require('./style'); const htmlParser = require('./html'); const scriptParser = require('./script'); @@ -69,7 +70,7 @@ function parseContent(content: string, templatePath: string, defaults: Object, t if (resultsArray[2]) { style = resultsArray[2]; } else { - style = resultsArray[1].styles ? resultsArray[1].styles : ''; + style = new CleanCSS({}).minify(resultsArray[1].styles ? resultsArray[1].styles : '').styles; } script.template = template; diff --git a/tests/index.js b/tests/index.js index a9c6df8..d63f734 100644 --- a/tests/index.js +++ b/tests/index.js @@ -5,7 +5,7 @@ const Models = require('../src/models'); const path = require('path'); const options = { - rootPath: path.join(__dirname, '../example/vueFiles') + rootPath: path.join(__dirname, '../example') }; const data = { @@ -20,8 +20,8 @@ const vueOptions = { } } -const exampleHead = `\nPage Title\n`; -const exampleScript = `` +const exampleHead = `\nPage Title\n`; +const exampleScript = ``; test('renders App object', t => { const renderer = new ExpressVueRenderer(options); diff --git a/tests/parser/index.js b/tests/parser/index.js index 21a6687..3f7bc31 100644 --- a/tests/parser/index.js +++ b/tests/parser/index.js @@ -20,9 +20,9 @@ var cacheOptions = { var lruCache = LRU(cacheOptions); let types = new Types(); -const component = __dirname + '/../../example/vueFiles/components/uuid.vue'; +const component = __dirname + '/../../example/components/uuid.vue'; const options = { - rootPath: path.join(__dirname, 'tests'), + rootPath: path.join(__dirname, '../../example'), component: 'uuid.vue' }; diff --git a/tests/utils/checkPathUtils.js b/tests/utils/checkPathUtils.js index 52180f9..5c80dd6 100644 --- a/tests/utils/checkPathUtils.js +++ b/tests/utils/checkPathUtils.js @@ -5,7 +5,7 @@ import { } from '../../src/utils'; import Models from '../../src/models'; -const rootPath = path.join(__dirname, '../../example/vueFiles/'); +const rootPath = path.join(__dirname, '../../example/'); const defaults = new Models.Defaults(); var LRU = require('lru-cache'); var cacheOptions = { @@ -15,7 +15,7 @@ var cacheOptions = { var lruCache = LRU(cacheOptions); test('correctPath Path', t => { - const filePath = path.join(rootPath, '../../example/vueFiles/components/uuid.vue'); + const filePath = path.join(rootPath, '../example/components/uuid.vue'); const correctPath = rootPath + 'components/uuid.vue'; return PathUtils.getCorrectPathForFile(filePath, 'view', defaults, lruCache) From 14bc980702241ea7d0d8238826cb0811c3148cd2 Mon Sep 17 00:00:00 2001 From: Nick Fytros Date: Wed, 30 Aug 2017 22:16:55 +0200 Subject: [PATCH 7/8] fixed styles parser to parse array of style objects --- src/parser/style.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/parser/style.js b/src/parser/style.js index de50467..325fda6 100644 --- a/src/parser/style.js +++ b/src/parser/style.js @@ -12,16 +12,17 @@ type StyleObjectType = { function styleParser(styleObjectArray: StyleObjectType[]): Promise { return new Promise((resolve) => { + let output = ''; if (!styleObjectArray || styleObjectArray.length === 0) { - resolve(''); + resolve(output); } else { for (const styleObject of styleObjectArray) { if(styleObject.lang === 'scss' || styleObject.lang === 'less') { console.error('Sorry please only use plain CSS in your files for now'); } - const output = new CleanCSS({}).minify(styleObject.content); - resolve(output.styles); + output += new CleanCSS({}).minify(styleObject.content).styles; } + resolve(output); } }); } From 97f4f21aa6b973b89aed07e65519973f3332099b Mon Sep 17 00:00:00 2001 From: Nick Fytros Date: Wed, 30 Aug 2017 22:31:07 +0200 Subject: [PATCH 8/8] optimized code --- src/parser/style.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/parser/style.js b/src/parser/style.js index 325fda6..bdd9ba7 100644 --- a/src/parser/style.js +++ b/src/parser/style.js @@ -13,17 +13,15 @@ type StyleObjectType = { function styleParser(styleObjectArray: StyleObjectType[]): Promise { return new Promise((resolve) => { let output = ''; - if (!styleObjectArray || styleObjectArray.length === 0) { - resolve(output); - } else { + if (styleObjectArray && styleObjectArray.length > 0) { for (const styleObject of styleObjectArray) { if(styleObject.lang === 'scss' || styleObject.lang === 'less') { console.error('Sorry please only use plain CSS in your files for now'); } output += new CleanCSS({}).minify(styleObject.content).styles; } - resolve(output); } + resolve(output); }); }