diff --git a/src/compiler/compile/nodes/EachBlock.ts b/src/compiler/compile/nodes/EachBlock.ts index 85da0a2210..31850f8745 100644 --- a/src/compiler/compile/nodes/EachBlock.ts +++ b/src/compiler/compile/nodes/EachBlock.ts @@ -4,7 +4,7 @@ import map_children from './shared/map_children'; import TemplateScope from './shared/TemplateScope'; import AbstractBlock from './shared/AbstractBlock'; import Element from './Element'; -import { x, p } from 'code-red'; +import { x } from 'code-red'; import { Node, Identifier, RestElement } from 'estree'; interface Context { @@ -39,7 +39,7 @@ function unpack_destructuring(contexts: Context[], node: Node, modifier: (node: argument: property.key as Identifier }; - node.properties[i] = replacement; + node.properties[i] = replacement as any; unpack_destructuring( contexts, diff --git a/src/compiler/compile/render_dom/Block.ts b/src/compiler/compile/render_dom/Block.ts index 7e25cd0f56..fc501143d1 100644 --- a/src/compiler/compile/render_dom/Block.ts +++ b/src/compiler/compile/render_dom/Block.ts @@ -17,6 +17,7 @@ export interface BlockOptions { snippet: Node; store: string; tail: Node; + modifier: (node: Node) => Node; }>; dependencies?: Set; } @@ -41,6 +42,7 @@ export default class Block { snippet: Node; store: string; tail: Node; + modifier: (node: Node) => Node; }>; chunks: { diff --git a/src/compiler/compile/render_dom/index.ts b/src/compiler/compile/render_dom/index.ts index 4dbe5bb059..a972baf5c8 100644 --- a/src/compiler/compile/render_dom/index.ts +++ b/src/compiler/compile/render_dom/index.ts @@ -1,5 +1,4 @@ import { b, x, p } from 'code-red'; -import { escape } from '../utils/stringify'; import Component from '../Component'; import Renderer from './Renderer'; import { CompileOptions } from '../../interfaces'; @@ -8,7 +7,7 @@ import add_to_set from '../utils/add_to_set'; import { extract_names } from '../utils/scope'; import { invalidate } from '../utils/invalidate'; import Block from './Block'; -import { ClassDeclaration, FunctionExpression, Node, LabeledStatement, Statement } from 'estree'; +import { ClassDeclaration, FunctionExpression, Node, Statement } from 'estree'; export default function dom( component: Component, diff --git a/src/compiler/compile/render_dom/wrappers/Element/Binding.ts b/src/compiler/compile/render_dom/wrappers/Element/Binding.ts index d0baf4aa4a..90727743fa 100644 --- a/src/compiler/compile/render_dom/wrappers/Element/Binding.ts +++ b/src/compiler/compile/render_dom/wrappers/Element/Binding.ts @@ -7,7 +7,7 @@ import Renderer from '../../Renderer'; import flatten_reference from '../../../utils/flatten_reference'; import EachBlock from '../../../nodes/EachBlock'; import { changed } from '../shared/changed'; -import { Node, Identifier, MemberExpression } from 'estree'; +import { Node, Identifier } from 'estree'; export default class BindingWrapper { node: Binding; diff --git a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts index 431affbcad..f6e3039243 100644 --- a/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts +++ b/src/compiler/compile/render_dom/wrappers/InlineComponent/index.ts @@ -15,7 +15,7 @@ import TemplateScope from '../../../nodes/shared/TemplateScope'; import is_dynamic from '../shared/is_dynamic'; import bind_this from '../shared/bind_this'; import { changed } from '../shared/changed'; -import { Node, Identifier, Expression, ObjectExpression, Property } from 'estree'; +import { Node, Identifier, ObjectExpression } from 'estree'; export default class InlineComponentWrapper extends Wrapper { var: Identifier; diff --git a/src/compiler/compile/render_dom/wrappers/Slot.ts b/src/compiler/compile/render_dom/wrappers/Slot.ts index 1934ea14cd..1ab1b6abcb 100644 --- a/src/compiler/compile/render_dom/wrappers/Slot.ts +++ b/src/compiler/compile/render_dom/wrappers/Slot.ts @@ -66,7 +66,7 @@ export default class SlotWrapper extends Wrapper { get_slot_changes = renderer.component.get_unique_name(`get_${sanitize(slot_name)}_slot_changes`); get_slot_context = renderer.component.get_unique_name(`get_${sanitize(slot_name)}_slot_context`); - const context = get_slot_data(this.node.values, false); + const context = get_slot_data(this.node.values); const changes = x`{}` as ObjectExpression; const dependencies = new Set(); diff --git a/src/compiler/compile/render_ssr/handlers/Comment.ts b/src/compiler/compile/render_ssr/handlers/Comment.ts index 2e1c981066..4595274bc0 100644 --- a/src/compiler/compile/render_ssr/handlers/Comment.ts +++ b/src/compiler/compile/render_ssr/handlers/Comment.ts @@ -1,7 +1,7 @@ import Renderer, { RenderOptions } from '../Renderer'; import Comment from '../../nodes/Comment'; -export default function(node: Comment, renderer: Renderer, options: RenderOptions) { +export default function(_node: Comment, _renderer: Renderer, _options: RenderOptions) { // TODO preserve comments // if (options.preserveComments) { diff --git a/src/compiler/compile/render_ssr/handlers/Element.ts b/src/compiler/compile/render_ssr/handlers/Element.ts index 8de08c51f3..2e24b0e471 100644 --- a/src/compiler/compile/render_ssr/handlers/Element.ts +++ b/src/compiler/compile/render_ssr/handlers/Element.ts @@ -1,12 +1,12 @@ -import { is_void, quote_prop_if_necessary } from '../../../utils/names'; +import { is_void } from '../../../utils/names'; import Attribute from '../../nodes/Attribute'; import Class from '../../nodes/Class'; import { get_attribute_value, get_class_attribute_value } from './shared/get_attribute_value'; import { get_slot_scope } from './shared/get_slot_scope'; import Renderer, { RenderOptions } from '../Renderer'; import Element from '../../nodes/Element'; -import Text from '../../nodes/Text'; import { x } from 'code-red'; +import Expression from '../../nodes/shared/Expression'; // source: https://gist.github.com/ArjanSchouten/0b8574a6ad7f5065a5e7 const boolean_attributes = new Set([ @@ -54,7 +54,6 @@ export default function(node: Element, renderer: Renderer, options: RenderOption }) { // awkward special case let node_contents; - let value; const contenteditable = ( node.name !== 'textarea' && @@ -112,12 +111,12 @@ export default function(node: Element, renderer: Renderer, options: RenderOption attribute.chunks[0].type !== 'Text' ) { // a boolean attribute with one non-Text chunk - args.push(x`{ ${attribute.name}: ${attribute.chunks[0].node} }`); + args.push(x`{ ${attribute.name}: ${(attribute.chunks[0] as Expression).node} }`); } else if (attribute.name === 'class' && class_expression) { // Add class expression args.push(x`{ ${attribute.name}: [${get_class_attribute_value(attribute)}, ${class_expression}].join(' ').trim() }`); } else { - args.push(x`{ ${attribute.name}: ${attribute.name === 'class' ? get_class_attribute_value(attribute) : get_attribute_value(attribute, true)} }`); + args.push(x`{ ${attribute.name}: ${attribute.name === 'class' ? get_class_attribute_value(attribute) : get_attribute_value(attribute)} }`); } } }); @@ -138,7 +137,7 @@ export default function(node: Element, renderer: Renderer, options: RenderOption ) { // a boolean attribute with one non-Text chunk renderer.add_string(` `); - renderer.add_expression(x`${attribute.chunks[0].node} ? "${attribute.name}" : ""`); + renderer.add_expression(x`${(attribute.chunks[0] as Expression).node} ? "${attribute.name}" : ""`); } else if (attribute.name === 'class' && class_expression) { add_class_attribute = false; renderer.add_string(` class="`); @@ -146,7 +145,7 @@ export default function(node: Element, renderer: Renderer, options: RenderOption renderer.add_string(`"`); } else if (attribute.chunks.length === 1 && attribute.chunks[0].type !== 'Text') { const { name } = attribute; - const snippet = attribute.chunks[0].node; + const snippet = (attribute.chunks[0] as Expression).node; renderer.add_expression(x`@add_attribute("${name}", ${snippet}, ${boolean_attributes.has(name) ? 1 : 0})`); } else { renderer.add_string(` ${attribute.name}="`); @@ -167,7 +166,9 @@ export default function(node: Element, renderer: Renderer, options: RenderOption // TODO server-render group bindings } else if (contenteditable && (name === 'textContent' || name === 'innerHTML')) { node_contents = expression.node; - value = name === 'textContent' ? x`@escape($$value)` : x`$$value`; + + // TODO where was this used? + // value = name === 'textContent' ? x`@escape($$value)` : x`$$value`; } else if (binding.name === 'value' && node.name === 'textarea') { const snippet = expression.node; node_contents = x`${snippet} || ""`; diff --git a/src/compiler/compile/render_ssr/handlers/InlineComponent.ts b/src/compiler/compile/render_ssr/handlers/InlineComponent.ts index e9ebb189cb..5c4d9c73b8 100644 --- a/src/compiler/compile/render_ssr/handlers/InlineComponent.ts +++ b/src/compiler/compile/render_ssr/handlers/InlineComponent.ts @@ -1,5 +1,4 @@ import { string_literal } from '../../utils/stringify'; -import { quote_name_if_necessary } from '../../../utils/names'; import Renderer, { RenderOptions } from '../Renderer'; import { get_slot_scope } from './shared/get_slot_scope'; import InlineComponent from '../../nodes/InlineComponent'; diff --git a/src/compiler/compile/render_ssr/handlers/Slot.ts b/src/compiler/compile/render_ssr/handlers/Slot.ts index c8da24cd79..9f8d617c53 100644 --- a/src/compiler/compile/render_ssr/handlers/Slot.ts +++ b/src/compiler/compile/render_ssr/handlers/Slot.ts @@ -4,7 +4,7 @@ import Slot from '../../nodes/Slot'; import { x } from 'code-red'; export default function(node: Slot, renderer: Renderer, options: RenderOptions) { - const slot_data = get_slot_data(node.values, true); + const slot_data = get_slot_data(node.values); renderer.push(); renderer.render(node.children, options); diff --git a/src/compiler/compile/render_ssr/index.ts b/src/compiler/compile/render_ssr/index.ts index 7a7796ed29..f63b73d564 100644 --- a/src/compiler/compile/render_ssr/index.ts +++ b/src/compiler/compile/render_ssr/index.ts @@ -6,6 +6,7 @@ import Renderer from './Renderer'; import { INode as TemplateNode } from '../nodes/interfaces'; // TODO import Text from '../nodes/Text'; import { extract_names } from '../utils/scope'; +import { LabeledStatement, Statement, ExpressionStatement, AssignmentExpression } from 'estree'; export default function ssr( component: Component, @@ -72,7 +73,9 @@ export default function ssr( : []; const reactive_declarations = component.reactive_declarations.map(d => { - let statement = b`${d.node.body}`; + const body: Statement = (d.node as LabeledStatement).body; + + let statement = b`${body}`; if (d.declaration) { const declared = extract_names(d.declaration); @@ -90,12 +93,14 @@ export default function ssr( declared.length > injected.length ); + const { left, right } = (body as ExpressionStatement).expression as AssignmentExpression; + statement = separate ? b` ${injected.map(name => b`let ${name};`)} ${statement}` : b` - let ${d.node.body.expression.left} = ${d.node.body.expression.right}`; + let ${left} = ${right}`; } } diff --git a/src/compiler/compile/utils/get_slot_data.ts b/src/compiler/compile/utils/get_slot_data.ts index c81dc83c92..936dc85977 100644 --- a/src/compiler/compile/utils/get_slot_data.ts +++ b/src/compiler/compile/utils/get_slot_data.ts @@ -2,7 +2,7 @@ import Attribute from '../nodes/Attribute'; import { p, x } from 'code-red'; import { string_literal } from './stringify'; -export default function get_slot_data(values: Map, is_ssr: boolean) { +export default function get_slot_data(values: Map) { return { type: 'ObjectExpression', properties: Array.from(values.values()) diff --git a/src/compiler/utils/names.ts b/src/compiler/utils/names.ts index 7796e5a11b..5015c22f8f 100644 --- a/src/compiler/utils/names.ts +++ b/src/compiler/utils/names.ts @@ -117,16 +117,6 @@ export function is_valid(str: string): boolean { return true; } -export function quote_name_if_necessary(name: string) { - if (!is_valid(name)) return `"${name}"`; - return name; -} - -export function quote_prop_if_necessary(name: string) { - if (!is_valid(name)) return `["${name}"]`; - return `.${name}`; -} - export function sanitize(name: string) { return name .replace(/[^a-zA-Z0-9_]+/g, '_')