theluyuan/vue3-yuanma
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor(compiler): prefix all imported helpers to avoid scope collision

Browse Source
This commit is contained in:
Evan You
2020-02-07 18:53:39 -05:00
parent c44d9fbe3d
commit 51317af6e8
6 changed files with 219 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

207
packages/template-explorer/src/options.ts
View File

@@ -6,6 +6,7 @@ export const ssrMode = ref(false)
export const compilerOptions: CompilerOptions = reactive({
mode: 'module',
prefixIdentifiers: false,
optimizeBindings: false,
hoistStatic: false,
cacheHandlers: false,
scopeId: null
@@ -29,96 +30,134 @@ const App = {
},
`@${__COMMIT__}`
),
' | ',
h(
'a',
{
href:
'https://app.netlify.com/sites/vue-next-template-explorer/deploys',
target: `_blank`
},
'History'
),
h('div', { id: 'options' }, [
// mode selection
h('span', { class: 'options-group' }, [
h('span', { class: 'label' }, 'Mode:'),
h('input', {
type: 'radio',
id: 'mode-module',
name: 'mode',
checked: isModule,
onChange() {
compilerOptions.mode = 'module'
}
}),
h('label', { for: 'mode-module' }, 'module'),
h('input', {
type: 'radio',
id: 'mode-function',
name: 'mode',
checked: !isModule,
onChange() {
compilerOptions.mode = 'function'
}
}),
h('label', { for: 'mode-function' }, 'function')
]),
h('div', { id: 'options-wrapper' }, [
h('div', { id: 'options-label' }, 'Options ↘'),
h('ul', { id: 'options' }, [
// mode selection
h('li', { id: 'mode' }, [
h('span', { class: 'label' }, 'Mode: '),
h('input', {
type: 'radio',
id: 'mode-module',
name: 'mode',
checked: isModule,
onChange() {
compilerOptions.mode = 'module'
}
}),
h('label', { for: 'mode-module' }, 'module'),
' ',
h('input', {
type: 'radio',
id: 'mode-function',
name: 'mode',
checked: !isModule,
onChange() {
compilerOptions.mode = 'function'
}
}),
h('label', { for: 'mode-function' }, 'function')
]),
// SSR
h('input', {
type: 'checkbox',
id: 'ssr',
name: 'ssr',
checked: ssrMode.value,
onChange(e: Event) {
ssrMode.value = (e.target as HTMLInputElement).checked
}
}),
h('label', { for: 'ssr' }, 'SSR'),
// SSR
h('li', [
h('input', {
type: 'checkbox',
id: 'ssr',
name: 'ssr',
checked: ssrMode.value,
onChange(e: Event) {
ssrMode.value = (e.target as HTMLInputElement).checked
}
}),
h('label', { for: 'ssr' }, 'SSR')
]),
// toggle prefixIdentifiers
h('input', {
type: 'checkbox',
id: 'prefix',
disabled: isModule || isSSR,
checked: usePrefix || isSSR,
onChange(e: Event) {
compilerOptions.prefixIdentifiers =
(e.target as HTMLInputElement).checked || isModule
}
}),
h('label', { for: 'prefix' }, 'prefixIdentifiers'),
// toggle prefixIdentifiers
h('li', [
h('input', {
type: 'checkbox',
id: 'prefix',
disabled: isModule || isSSR,
checked: usePrefix || isSSR,
onChange(e: Event) {
compilerOptions.prefixIdentifiers =
(e.target as HTMLInputElement).checked || isModule
}
}),
h('label', { for: 'prefix' }, 'prefixIdentifiers')
]),
// toggle hoistStatic
h('input', {
type: 'checkbox',
id: 'hoist',
checked: compilerOptions.hoistStatic && !isSSR,
disabled: isSSR,
onChange(e: Event) {
compilerOptions.hoistStatic = (e.target as HTMLInputElement).checked
}
}),
h('label', { for: 'hoist' }, 'hoistStatic'),
// toggle hoistStatic
h('li', [
h('input', {
type: 'checkbox',
id: 'hoist',
checked: compilerOptions.hoistStatic && !isSSR,
disabled: isSSR,
onChange(e: Event) {
compilerOptions.hoistStatic = (e.target as HTMLInputElement).checked
}
}),
h('label', { for: 'hoist' }, 'hoistStatic')
]),
// toggle cacheHandlers
h('input', {
type: 'checkbox',
id: 'cache',
checked: usePrefix && compilerOptions.cacheHandlers && !isSSR,
disabled: !usePrefix || isSSR,
onChange(e: Event) {
compilerOptions.cacheHandlers = (e.target as HTMLInputElement).checked
}
}),
h('label', { for: 'cache' }, 'cacheHandlers'),
// toggle cacheHandlers
h('li', [
h('input', {
type: 'checkbox',
id: 'cache',
checked: usePrefix && compilerOptions.cacheHandlers && !isSSR,
disabled: !usePrefix || isSSR,
onChange(e: Event) {
compilerOptions.cacheHandlers = (e.target as HTMLInputElement).checked
}
}),
h('label', { for: 'cache' }, 'cacheHandlers')
]),
// toggle scopeId
h('input', {
type: 'checkbox',
id: 'scope-id',
disabled: !isModule,
checked: isModule && compilerOptions.scopeId,
onChange(e: Event) {
compilerOptions.scopeId =
isModule && (e.target as HTMLInputElement).checked
? 'scope-id'
: null
}
}),
h('label', { for: 'scope-id' }, 'scopeId')
// toggle scopeId
h('li', [
h('input', {
type: 'checkbox',
id: 'scope-id',
disabled: !isModule,
checked: isModule && compilerOptions.scopeId,
onChange(e: Event) {
compilerOptions.scopeId =
isModule && (e.target as HTMLInputElement).checked
? 'scope-id'
: null
}
}),
h('label', { for: 'scope-id' }, 'scopeId')
]),
// toggle optimizeBindings
h('li', [
h('input', {
type: 'checkbox',
id: 'optimize-bindings',
disabled: !isModule || isSSR,
checked: isModule && !isSSR && compilerOptions.optimizeBindings,
onChange(e: Event) {
compilerOptions.optimizeBindings = (e.target as HTMLInputElement).checked
}
}),
h('label', { for: 'optimize-bindings' }, 'optimizeBindings')
])
])
])
]
}

35
packages/template-explorer/style.css
View File

@@ -14,6 +14,7 @@ body {
border-bottom: 1px solid #333;
padding: 0.3em 1.6em;
color: #fff;
z-index: 1;
}
h1 {
@@ -22,17 +23,34 @@ h1 {
margin-right: 15px;
}
#options-wrapper {
position: absolute;
top: 20px;
right: 10px;
}
#options-wrapper:hover #options {
display: block;
}
#options-label {
cursor: pointer;
text-align: right;
padding-right: 10px;
font-weight: bold;
}
#options {
float: right;
margin-top: 1em;
display: none;
margin-top: 15px;
list-style-type: none;
background-color: #1e1e1e;
border: 1px solid #333;
padding: 15px 30px;
}
.options-group {
margin-right: 30px;
}
#header span, #header label, #header input, #header a {
display: inline-block;
#options li {
margin: 8px 0;
}
#header a {
@@ -45,7 +63,6 @@ h1 {
}
#header input {
margin-left: 12px;
margin-right: 6px;
}