From 5047bc8dbea7628670c57aab96044619e71bbd0d Mon Sep 17 00:00:00 2001 From: Evan You Date: Fri, 4 Oct 2019 13:08:06 -0400 Subject: [PATCH] workflow: basic template explorer --- packages/compiler-core/src/utils.ts | 16 ++++- packages/shared/package.json | 1 + packages/template-explorer/README.md | 8 +++ packages/template-explorer/index.html | 43 +++++++++++++ packages/template-explorer/package.json | 15 +++++ packages/template-explorer/src/index.ts | 83 +++++++++++++++++++++++++ rollup.config.js | 3 +- scripts/bootstrap.js | 13 ++-- scripts/build.js | 6 +- scripts/utils.js | 4 +- tsconfig.json | 3 +- yarn.lock | 5 ++ 12 files changed, 188 insertions(+), 12 deletions(-) create mode 100644 packages/template-explorer/README.md create mode 100644 packages/template-explorer/index.html create mode 100644 packages/template-explorer/package.json create mode 100644 packages/template-explorer/src/index.ts diff --git a/packages/compiler-core/src/utils.ts b/packages/compiler-core/src/utils.ts index 87d81e85..c8711d14 100644 --- a/packages/compiler-core/src/utils.ts +++ b/packages/compiler-core/src/utils.ts @@ -20,7 +20,7 @@ import { parse } from 'acorn' import { walk } from 'estree-walker' import { TransformContext } from './transform' import { OPEN_BLOCK, CREATE_BLOCK, MERGE_PROPS } from './runtimeConstants' -import { isString } from '@vue/shared' +import { isString, isFunction } from '@vue/shared' import { PropsExpression } from './transforms/transformElement' // cache node requires @@ -29,12 +29,22 @@ import { PropsExpression } from './transforms/transformElement' let _parse: typeof parse let _walk: typeof walk +function loadDep(name: string) { + if (typeof process !== 'undefined' && isFunction(require)) { + return require(name) + } else { + // This is only used when we are building a dev-only build of the compiler + // which runs in the browser but also uses Node deps. + return (window as any)._deps[name] + } +} + export const parseJS: typeof parse = (code: string, options: any) => { assert( !__BROWSER__, `Expression AST analysis can only be performed in non-browser builds.` ) - const parse = _parse || (_parse = require('acorn').parse) + const parse = _parse || (_parse = loadDep('acorn').parse) return parse(code, options) } @@ -43,7 +53,7 @@ export const walkJS: typeof walk = (ast, walker) => { !__BROWSER__, `Expression AST analysis can only be performed in non-browser builds.` ) - const walk = _walk || (_walk = require('estree-walker').walk) + const walk = _walk || (_walk = loadDep('estree-walker').walk) return walk(ast, walker) } diff --git a/packages/shared/package.json b/packages/shared/package.json index 53668013..536b9172 100644 --- a/packages/shared/package.json +++ b/packages/shared/package.json @@ -1,4 +1,5 @@ { "name": "@vue/shared", + "version": "3.0.0-alpha.1", "private": true } diff --git a/packages/template-explorer/README.md b/packages/template-explorer/README.md new file mode 100644 index 00000000..f34a2a17 --- /dev/null +++ b/packages/template-explorer/README.md @@ -0,0 +1,8 @@ +## Template Explorer + +Live explorer for template compilation output. + +To run: + +- `yarn dev template-explorer` +- Serve project root over a local HTTP server. diff --git a/packages/template-explorer/index.html b/packages/template-explorer/index.html new file mode 100644 index 00000000..41c46c35 --- /dev/null +++ b/packages/template-explorer/index.html @@ -0,0 +1,43 @@ + + + +
+
+ + + + + + + diff --git a/packages/template-explorer/package.json b/packages/template-explorer/package.json new file mode 100644 index 00000000..560f5625 --- /dev/null +++ b/packages/template-explorer/package.json @@ -0,0 +1,15 @@ +{ + "name": "@vue/template-explorer", + "version": "3.0.0-alpha.1", + "private": true, + "buildOptions": { + "formats": [ + "global" + ], + "env": "development", + "enableNonBrowserBranches": true + }, + "dependencies": { + "monaco-editor": "^0.18.1" + } +} diff --git a/packages/template-explorer/src/index.ts b/packages/template-explorer/src/index.ts new file mode 100644 index 00000000..ece20fb1 --- /dev/null +++ b/packages/template-explorer/src/index.ts @@ -0,0 +1,83 @@ +import * as m from 'monaco-editor' +import { compile } from '@vue/compiler-dom' + +const self = window as any + +self.init = () => { + const monaco = (window as any).monaco as typeof m + const persistedContent = + decodeURIComponent(window.location.hash.slice(1)) || + `
{{ foo + bar }}
` + + self.compilerOptions = { + mode: 'module', + prefixIdentifiers: true, + hoistStatic: true + } + + function compileCode(source: string): string { + console.clear() + try { + const { code, ast } = compile(source, self.compilerOptions) + + console.log(ast) + return code + } catch (e) { + console.error(e) + return `/* See console for error */` + } + } + + const sharedOptions = { + theme: 'vs-dark', + fontSize: 14, + wordWrap: 'on', + scrollBeyondLastLine: false, + minimap: { + enabled: false + } + } as const + + const editor = monaco.editor.create( + document.getElementById('source') as HTMLElement, + { + value: persistedContent, + language: 'html', + ...sharedOptions + } + ) + + const model = editor.getModel()! + + model.updateOptions({ + tabSize: 2 + }) + + model.onDidChangeContent(() => { + const src = editor.getValue() + window.location.hash = encodeURIComponent(src) + const res = compileCode(src) + if (res) { + output.setValue(res) + } + }) + + const output = monaco.editor.create( + document.getElementById('output') as HTMLElement, + { + value: compileCode(persistedContent), + language: 'javascript', + readOnly: true, + ...sharedOptions + } + ) + + output.getModel()!.updateOptions({ + tabSize: 2 + }) + + window.addEventListener('resize', () => { + editor.layout() + output.layout() + }) +} diff --git a/rollup.config.js b/rollup.config.js index 0753353e..7ee58378 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -119,7 +119,8 @@ function createConfig(output, plugins = []) { createReplacePlugin( isProductionBuild, isBunlderESMBuild, - isGlobalBuild || isBrowserESMBuild + (isGlobalBuild || isBrowserESMBuild) && + !packageOptions.enableNonBrowserBranches ), ...plugins ], diff --git a/scripts/bootstrap.js b/scripts/bootstrap.js index 7182a540..f89f9176 100644 --- a/scripts/bootstrap.js +++ b/scripts/bootstrap.js @@ -9,16 +9,21 @@ const packagesDir = path.resolve(__dirname, '../packages') const files = fs.readdirSync(packagesDir) files.forEach(shortName => { - if (shortName === 'shared') { - return - } if (!fs.statSync(path.join(packagesDir, shortName)).isDirectory()) { return } const name = shortName === `vue` ? shortName : `@vue/${shortName}` const pkgPath = path.join(packagesDir, shortName, `package.json`) - if (args.force || !fs.existsSync(pkgPath)) { + const pkgExists = fs.existsSync(pkgPath) + if (pkgExists) { + const pkg = require(pkgPath) + if (pkg.private) { + return + } + } + + if (args.force || !pkgExists) { const json = { name, version: baseVersion, diff --git a/scripts/build.js b/scripts/build.js index 51eb6bc0..67356732 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -51,12 +51,16 @@ async function build(target) { await fs.remove(`${pkgDir}/dist`) + const env = + (pkg.buildOptions && pkg.buildOptions.env) || + (devOnly ? 'development' : 'production') + await execa( 'rollup', [ '-c', '--environment', - `NODE_ENV:${devOnly ? 'development' : 'production'},` + + `NODE_ENV:${env},` + `TARGET:${target}` + (formats ? `,FORMATS:${formats}` : ``) + (args.types ? `,TYPES:true` : ``) + diff --git a/scripts/utils.js b/scripts/utils.js index d703474c..89acd770 100644 --- a/scripts/utils.js +++ b/scripts/utils.js @@ -5,7 +5,7 @@ const targets = (exports.targets = fs.readdirSync('packages').filter(f => { return false } const pkg = require(`../packages/${f}/package.json`) - if (pkg.private) { + if (pkg.private && !pkg.buildOptions) { return false } return true @@ -26,6 +26,6 @@ exports.fuzzyMatchTarget = (partialTargets, includeAllMatching) => { if (matched.length) { return matched } else { - throw new Error(`Target ${partialTarget} not found!`) + throw new Error(`Target ${partialTargets} not found!`) } } diff --git a/tsconfig.json b/tsconfig.json index 88eba559..3784a8e2 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -27,7 +27,8 @@ "@vue/reactivity": ["packages/reactivity/src"], "@vue/compiler-core": ["packages/compiler-core/src"], "@vue/compiler-dom": ["packages/compiler-dom/src"], - "@vue/server-renderer": ["packages/server-renderer/src"] + "@vue/server-renderer": ["packages/server-renderer/src"], + "@vue/template-explorer": ["packages/template-explorer/src"] } }, "include": [ diff --git a/yarn.lock b/yarn.lock index f77ce4f7..762c0798 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4932,6 +4932,11 @@ modify-values@^1.0.0: resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022" integrity sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw== +monaco-editor@^0.18.1: + version "0.18.1" + resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.18.1.tgz#ced7c305a23109875feeaf395a504b91f6358cfc" + integrity sha512-fmL+RFZ2Hrezy+X/5ZczQW51LUmvzfcqOurnkCIRFTyjdVjzR7JvENzI6+VKBJzJdPh6EYL4RoWl92b2Hrk9fw== + move-concurrently@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"