diff --git a/packages/translator/src/__tests__/fixtures/migrate-input/__snapshots__/csr.expected.md b/packages/translator/src/__tests__/fixtures/migrate-input/__snapshots__/csr.expected.md new file mode 100644 index 000000000..c157238da --- /dev/null +++ b/packages/translator/src/__tests__/fixtures/migrate-input/__snapshots__/csr.expected.md @@ -0,0 +1,13 @@ +# Render {"x":1} +```html +
+ + 1 + +
+``` + +# Mutations +``` +inserted div0 +``` \ No newline at end of file diff --git a/packages/translator/src/__tests__/fixtures/migrate-input/__snapshots__/dom.expected.js b/packages/translator/src/__tests__/fixtures/migrate-input/__snapshots__/dom.expected.js new file mode 100644 index 000000000..0b01d7943 --- /dev/null +++ b/packages/translator/src/__tests__/fixtures/migrate-input/__snapshots__/dom.expected.js @@ -0,0 +1,16 @@ +import { data as _data, write as _write, createRenderFn as _createRenderFn } from "@marko/runtime-fluurt/src/dom"; + +function _apply_input(_scope, input) { + if (_write(_scope, 1, input)) _data(_scope[0], input.x); +} + +export const applyAttrs = function (_scope, input) { + _apply_input(_scope, input); +}; +export { _apply_input }; +export const template = "
"; +export const walks = +/* next(2), get, out(2) */ +"E m"; +export const apply = function () {}; +export default _createRenderFn(template, walks, apply, applyAttrs); \ No newline at end of file diff --git a/packages/translator/src/__tests__/fixtures/migrate-input/__snapshots__/html.expected.js b/packages/translator/src/__tests__/fixtures/migrate-input/__snapshots__/html.expected.js new file mode 100644 index 000000000..d0f86c604 --- /dev/null +++ b/packages/translator/src/__tests__/fixtures/migrate-input/__snapshots__/html.expected.js @@ -0,0 +1,10 @@ +import { markHydrateNode as _markHydrateNode, escapeXML as _escapeXML, write as _write, nextScopeId as _nextScopeId, createRenderer as _createRenderer } from "@marko/runtime-fluurt/src/html"; + +const _renderer = input => { + const _scope = _nextScopeId(); + + _write(`
${_markHydrateNode(_scope, 0)}${_escapeXML(input.x)}
`); +}; + +export default _renderer; +export const render = _createRenderer(_renderer); \ No newline at end of file diff --git a/packages/translator/src/__tests__/fixtures/migrate-input/__snapshots__/ssr.expected.md b/packages/translator/src/__tests__/fixtures/migrate-input/__snapshots__/ssr.expected.md new file mode 100644 index 000000000..2c0dab2e4 --- /dev/null +++ b/packages/translator/src/__tests__/fixtures/migrate-input/__snapshots__/ssr.expected.md @@ -0,0 +1,50 @@ +# Write +
1
+ + +# Render "End" +```html + + + +
+ + + 1 + +
+ + +``` + +# Mutations +``` +inserted html0 +inserted html0/head0 +inserted html0/body1 +inserted html0/body1/div0 +inserted html0/body1/div0/span0 +inserted html0/body1/div0/span0/#comment0 +inserted html0/body1/div0/span0/#text1 +``` + + +# Render "Hydrate" +```html + + + +
+ + + 1 + +
+ + +``` + +# Mutations +``` + +``` \ No newline at end of file diff --git a/packages/translator/src/__tests__/fixtures/migrate-input/template.marko b/packages/translator/src/__tests__/fixtures/migrate-input/template.marko new file mode 100644 index 000000000..c0beff8ec --- /dev/null +++ b/packages/translator/src/__tests__/fixtures/migrate-input/template.marko @@ -0,0 +1,5 @@ +
+ + ${input.x} + +
diff --git a/packages/translator/src/__tests__/fixtures/migrate-input/test.ts b/packages/translator/src/__tests__/fixtures/migrate-input/test.ts new file mode 100644 index 000000000..2963ac0e5 --- /dev/null +++ b/packages/translator/src/__tests__/fixtures/migrate-input/test.ts @@ -0,0 +1 @@ +export const steps = [{ x: 1 }]; diff --git a/packages/translator/src/visitors/referenced-identifier.ts b/packages/translator/src/visitors/referenced-identifier.ts index 7fd3a03f6..101effe02 100644 --- a/packages/translator/src/visitors/referenced-identifier.ts +++ b/packages/translator/src/visitors/referenced-identifier.ts @@ -3,37 +3,57 @@ import isStatic from "../util/is-static"; import { currentProgramPath } from "./program"; const outGlobalIdentifiers = new WeakMap, t.Identifier>(); +const hasAttrsTag = new WeakSet>(); export default { migrate(identifier: t.NodePath) { - if (identifier.node.name === "out" && !identifier.scope.hasBinding("out")) { - if ( - t.isMemberExpression(identifier.parent) && - t.isIdentifier(identifier.parent.property) && - identifier.parent.property.name === "global" - ) { - let globalIdentifier = outGlobalIdentifiers.get(currentProgramPath); - if (!globalIdentifier) { - globalIdentifier = - currentProgramPath.scope.generateUidIdentifier("$global"); - outGlobalIdentifiers.set(currentProgramPath, globalIdentifier); + const { name } = identifier.node; + if (identifier.scope.hasBinding(name)) return; + switch (identifier.node.name) { + case "input": { + if (!hasAttrsTag.has(currentProgramPath)) { + hasAttrsTag.add(currentProgramPath); insertAfterStatic( t.markoTag( - t.stringLiteral("get"), + t.stringLiteral("attrs"), undefined, t.markoTagBody(), undefined, - globalIdentifier + identifier.node ) ); } - - identifier.parentPath.replaceWith(globalIdentifier); - } else { - throw identifier.buildCodeFrameError( - "Only out.global is supported for compatibility." - ); + break; } + case "out": + if ( + t.isMemberExpression(identifier.parent) && + t.isIdentifier(identifier.parent.property) && + identifier.parent.property.name === "global" + ) { + let globalIdentifier = outGlobalIdentifiers.get(currentProgramPath); + if (!globalIdentifier) { + globalIdentifier = + currentProgramPath.scope.generateUidIdentifier("$global"); + outGlobalIdentifiers.set(currentProgramPath, globalIdentifier); + insertAfterStatic( + t.markoTag( + t.stringLiteral("get"), + undefined, + t.markoTagBody(), + undefined, + globalIdentifier + ) + ); + } + + identifier.parentPath.replaceWith(globalIdentifier); + } else { + throw identifier.buildCodeFrameError( + "Only out.global is supported for compatibility." + ); + } + break; } }, };