From b1a24c853b571a3ee1f1ec78afa6baee9a299f93 Mon Sep 17 00:00:00 2001 From: Bogdan Savluk Date: Tue, 21 May 2019 17:51:36 +0200 Subject: [PATCH 1/8] ignore .idea folder --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 7aa75b29f4..3d1322c33e 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ +.idea .DS_Store .nyc_output node_modules From 6fdaa803c77a6bb1d0eb5c20906cc2783da430da Mon Sep 17 00:00:00 2001 From: Bogdan Savluk Date: Tue, 21 May 2019 17:54:06 +0200 Subject: [PATCH 2/8] improve parser typings --- src/interfaces.ts | 45 ++++++++++++++++++++++++++++++++++-- src/parse/read/expression.ts | 9 ++++---- src/parse/state/tag.ts | 14 +++++------ 3 files changed, 55 insertions(+), 13 deletions(-) diff --git a/src/interfaces.ts b/src/interfaces.ts index 68fef7472e..90ee60d1be 100644 --- a/src/interfaces.ts +++ b/src/interfaces.ts @@ -1,10 +1,51 @@ -export interface Node { +interface BaseNode { start: number; end: number; type: string; + children?: Node[]; [prop_name: string]: any; } +export interface Text extends BaseNode { + type: 'Text', + data: string; +} + +export interface MustacheTag extends BaseNode { + type: 'MustacheTag', + expresion: Node; +} + +export type DirectiveType = 'Action' + | 'Animation' + | 'Binding' + | 'Class' + | 'EventHandler' + | 'Let' + | 'Ref' + | 'Transition'; + +interface BaseDirective extends BaseNode { + type: DirectiveType; + expression: null|Node; + name: string; + modifiers: string[] +} + +export interface Transition extends BaseDirective{ + type: 'Transition', + intro: boolean; + outro: boolean; +} + +export type Directive = BaseDirective | Transition; + +export type Node = Text + | MustacheTag + | BaseNode + | Directive + | Transition; + export interface Parser { readonly template: string; readonly filename?: string; @@ -92,4 +133,4 @@ export interface Var { initialised?: boolean; hoistable?: boolean; subscribable?: boolean; -} \ No newline at end of file +} diff --git a/src/parse/read/expression.ts b/src/parse/read/expression.ts index 4d1de89fe7..615f270112 100644 --- a/src/parse/read/expression.ts +++ b/src/parse/read/expression.ts @@ -1,9 +1,10 @@ import { parse_expression_at } from '../acorn'; import { Parser } from '../index'; +import { Identifier, Node, SimpleLiteral } from 'estree'; const literals = new Map([['true', true], ['false', false], ['null', null]]); -export default function read_expression(parser: Parser) { +export default function read_expression(parser: Parser): Node { const start = parser.index; const name = parser.read_until(/\s*}/); @@ -17,7 +18,7 @@ export default function read_expression(parser: Parser) { end, value: literals.get(name), raw: name, - }; + } as SimpleLiteral; } return { @@ -25,7 +26,7 @@ export default function read_expression(parser: Parser) { start, end: start + name.length, name, - }; + } as Identifier; } parser.index = start; @@ -34,7 +35,7 @@ export default function read_expression(parser: Parser) { const node = parse_expression_at(parser.template, parser.index); parser.index = node.end; - return node; + return node as Node; } catch (err) { parser.acorn_error(err); } diff --git a/src/parse/state/tag.ts b/src/parse/state/tag.ts index 56195549d8..f7f5a93574 100644 --- a/src/parse/state/tag.ts +++ b/src/parse/state/tag.ts @@ -4,7 +4,7 @@ import read_style from '../read/style'; import { decode_character_references } from '../utils/html'; import { is_void } from '../../utils/names'; import { Parser } from '../index'; -import { Node } from '../../interfaces'; +import { Directive, DirectiveType, Node, Text } from '../../interfaces'; import fuzzymatch from '../../utils/fuzzymatch'; import list from '../../utils/list'; @@ -401,7 +401,7 @@ function read_attribute(parser: Parser, unique_names: Set) { } if (value[0]) { - if (value.length > 1 || value[0].type === 'Text') { + if ((value as Array).length > 1 || value[0].type === 'Text') { parser.error({ code: `invalid-directive-value`, message: `Directive value must be a JavaScript expression enclosed in curly braces` @@ -409,7 +409,7 @@ function read_attribute(parser: Parser, unique_names: Set) { } } - const directive = { + const directive: Directive = { start, end, type, @@ -445,7 +445,7 @@ function read_attribute(parser: Parser, unique_names: Set) { }; } -function get_directive_type(name) { +function get_directive_type(name: string):DirectiveType { if (name === 'use') return 'Action'; if (name === 'animate') return 'Animation'; if (name === 'bind') return 'Binding'; @@ -471,15 +471,15 @@ function read_attribute_value(parser: Parser) { return value; } -function read_sequence(parser: Parser, done: () => boolean) { - let current_chunk: Node = { +function read_sequence(parser: Parser, done: () => boolean): Node[] { + let current_chunk: Text = { start: parser.index, end: null, type: 'Text', data: '', }; - const chunks = []; + const chunks: Node[] = []; while (parser.index < parser.template.length) { const index = parser.index; From b7ec99e8c7442c5ef85fde2e4e3382e48fd2ecd8 Mon Sep 17 00:00:00 2001 From: Bogdan Savluk Date: Tue, 21 May 2019 20:55:04 +0200 Subject: [PATCH 3/8] fix compile/nodes typings --- src/compile/nodes/Attribute.ts | 9 +++- src/compile/nodes/AwaitBlock.ts | 1 + src/compile/nodes/Binding.ts | 1 + src/compile/nodes/CatchBlock.ts | 1 + src/compile/nodes/DebugTag.ts | 3 +- src/compile/nodes/EachBlock.ts | 17 +++++-- src/compile/nodes/Element.ts | 16 +++--- src/compile/nodes/ElseBlock.ts | 3 +- src/compile/nodes/EventHandler.ts | 3 +- src/compile/nodes/Fragment.ts | 6 ++- src/compile/nodes/Head.ts | 1 - src/compile/nodes/InlineComponent.ts | 3 +- src/compile/nodes/MustacheTag.ts | 4 +- src/compile/nodes/PendingBlock.ts | 2 +- src/compile/nodes/RawMustacheTag.ts | 4 +- src/compile/nodes/Slot.ts | 8 +-- src/compile/nodes/Text.ts | 8 +-- src/compile/nodes/ThenBlock.ts | 1 + src/compile/nodes/Title.ts | 10 ++-- src/compile/nodes/interfaces.ts | 62 +++++++++++++++++++++++ src/compile/nodes/shared/AbstractBlock.ts | 3 +- src/compile/nodes/shared/Expression.ts | 13 +++-- src/compile/nodes/shared/Node.ts | 12 +++-- src/compile/nodes/shared/Tag.ts | 3 +- src/compile/nodes/shared/TemplateScope.ts | 3 +- src/compile/nodes/shared/map_children.ts | 8 +-- src/compile/utils/add_to_set.ts | 5 +- src/compile/utils/scope.ts | 4 +- src/compile/utils/stringify_attribute.ts | 5 +- 29 files changed, 163 insertions(+), 56 deletions(-) create mode 100644 src/compile/nodes/interfaces.ts diff --git a/src/compile/nodes/Attribute.ts b/src/compile/nodes/Attribute.ts index c07960ce47..0b2d3a3700 100644 --- a/src/compile/nodes/Attribute.ts +++ b/src/compile/nodes/Attribute.ts @@ -67,6 +67,7 @@ export default class Attribute extends Node { this.should_cache = this.is_dynamic ? this.chunks.length === 1 + // @ts-ignore todo: probably error ? this.chunks[0].node.type !== 'Identifier' || scope.names.has(this.chunks[0].node.name) : true : false; @@ -91,8 +92,10 @@ export default class Attribute extends Node { if (this.chunks.length === 0) return `""`; if (this.chunks.length === 1) { + return this.chunks[0].type === 'Text' - ? stringify(this.chunks[0].data) + ? stringify((this.chunks[0] as Text).data) + // @ts-ignore todo: probably error : this.chunks[0].render(block); } @@ -102,6 +105,7 @@ export default class Attribute extends Node { if (chunk.type === 'Text') { return stringify(chunk.data); } else { + // @ts-ignore todo: probably error return chunk.get_precedence() <= 13 ? `(${chunk.render()})` : chunk.render(); } }) @@ -114,7 +118,8 @@ export default class Attribute extends Node { return this.is_true ? true : this.chunks[0] - ? this.chunks[0].data + // method should be called only when `is_static = true` + ? (this.chunks[0] as Text).data : ''; } } diff --git a/src/compile/nodes/AwaitBlock.ts b/src/compile/nodes/AwaitBlock.ts index f8e6896b5d..cd57750d29 100644 --- a/src/compile/nodes/AwaitBlock.ts +++ b/src/compile/nodes/AwaitBlock.ts @@ -5,6 +5,7 @@ import CatchBlock from './CatchBlock'; import Expression from './shared/Expression'; export default class AwaitBlock extends Node { + type: 'AwaitBlock'; expression: Expression; value: string; error: string; diff --git a/src/compile/nodes/Binding.ts b/src/compile/nodes/Binding.ts index b03eba0c36..0d666a543f 100644 --- a/src/compile/nodes/Binding.ts +++ b/src/compile/nodes/Binding.ts @@ -5,6 +5,7 @@ import Component from '../Component'; import TemplateScope from './shared/TemplateScope'; export default class Binding extends Node { + type: 'Binding'; name: string; expression: Expression; is_contextual: boolean; diff --git a/src/compile/nodes/CatchBlock.ts b/src/compile/nodes/CatchBlock.ts index 23c08a494c..0edc0f76d8 100644 --- a/src/compile/nodes/CatchBlock.ts +++ b/src/compile/nodes/CatchBlock.ts @@ -3,6 +3,7 @@ import TemplateScope from './shared/TemplateScope'; import AbstractBlock from './shared/AbstractBlock'; export default class CatchBlock extends AbstractBlock { + type: 'CatchBlock'; scope: TemplateScope; constructor(component, parent, scope, info) { diff --git a/src/compile/nodes/DebugTag.ts b/src/compile/nodes/DebugTag.ts index 4d2c3f6ae4..0fbfa592ad 100644 --- a/src/compile/nodes/DebugTag.ts +++ b/src/compile/nodes/DebugTag.ts @@ -2,6 +2,7 @@ import Node from './shared/Node'; import Expression from './shared/Expression'; export default class DebugTag extends Node { + type: 'DebugTag'; expressions: Expression[]; constructor(component, parent, scope, info) { @@ -11,4 +12,4 @@ export default class DebugTag extends Node { return new Expression(component, parent, scope, node); }); } -} \ No newline at end of file +} diff --git a/src/compile/nodes/EachBlock.ts b/src/compile/nodes/EachBlock.ts index b58c023ac9..2f18373137 100644 --- a/src/compile/nodes/EachBlock.ts +++ b/src/compile/nodes/EachBlock.ts @@ -6,8 +6,15 @@ import TemplateScope from './shared/TemplateScope'; import AbstractBlock from './shared/AbstractBlock'; import { Node as INode } from '../../interfaces'; import { new_tail } from '../utils/tail'; +import Element from './Element'; -function unpack_destructuring(contexts: Array<{ name: string, tail: string }>, node: INode, tail: string) { +type Context = { + key: INode, + name?: string, + tail: string +}; + +function unpack_destructuring(contexts: Array, node: INode, tail: string) { if (!node) return; if (node.type === 'Identifier' || node.type === 'RestIdentifier') { @@ -53,7 +60,7 @@ export default class EachBlock extends AbstractBlock { context: string; key: Expression; scope: TemplateScope; - contexts: Array<{ name: string, tail: string }>; + contexts: Array; has_animation: boolean; has_binding = false; @@ -82,7 +89,7 @@ export default class EachBlock extends AbstractBlock { if (this.index) { // index can only change if this is a keyed each block - const dependencies = this.key ? this.expression.dependencies : []; + const dependencies = this.key ? this.expression.dependencies : new Set([]); this.scope.add(this.index, dependencies, this); } @@ -92,8 +99,8 @@ export default class EachBlock extends AbstractBlock { if (this.has_animation) { if (this.children.length !== 1) { - const child = this.children.find(child => !!child.animation); - component.error(child.animation, { + const child = this.children.find(child => !!(child as Element).animation); + component.error((child as Element).animation, { code: `invalid-animation`, message: `An element that use the animate directive must be the sole child of a keyed each block` }); diff --git a/src/compile/nodes/Element.ts b/src/compile/nodes/Element.ts index ac2b81b3e7..aa7c14a679 100644 --- a/src/compile/nodes/Element.ts +++ b/src/compile/nodes/Element.ts @@ -15,6 +15,7 @@ import fuzzymatch from '../../utils/fuzzymatch'; import list from '../../utils/list'; import Let from './Let'; import TemplateScope from './shared/TemplateScope'; +import { INode } from './interfaces'; const svg = /^(?:altGlyph|altGlyphDef|altGlyphItem|animate|animateColor|animateMotion|animateTransform|circle|clipPath|color-profile|cursor|defs|desc|discard|ellipse|feBlend|feColorMatrix|feComponentTransfer|feComposite|feConvolveMatrix|feDiffuseLighting|feDisplacementMap|feDistantLight|feDropShadow|feFlood|feFuncA|feFuncB|feFuncG|feFuncR|feGaussianBlur|feImage|feMerge|feMergeNode|feMorphology|feOffset|fePointLight|feSpecularLighting|feSpotLight|feTile|feTurbulence|filter|font|font-face|font-face-format|font-face-name|font-face-src|font-face-uri|foreignObject|g|glyph|glyphRef|hatch|hatchpath|hkern|image|line|linearGradient|marker|mask|mesh|meshgradient|meshpatch|meshrow|metadata|missing-glyph|mpath|path|pattern|polygon|polyline|radialGradient|rect|set|solidcolor|stop|svg|switch|symbol|text|textPath|tref|tspan|unknown|use|view|vkern)$/; @@ -101,7 +102,7 @@ export default class Element extends Node { intro?: Transition = null; outro?: Transition = null; animation?: Animation = null; - children: Node[]; + children: INode[]; namespace: string; constructor(component, parent, scope, info: any) { @@ -136,7 +137,7 @@ export default class Element extends Node { // Special case — treat these the same way: // // - const value_attribute = info.attributes.find((attribute: Node) => attribute.name === 'value'); + const value_attribute = info.attributes.find(attribute => attribute.name === 'value'); if (!value_attribute) { info.attributes.push({ @@ -228,7 +229,7 @@ export default class Element extends Node { let is_figure_parent = false; while (parent) { - if (parent.name === 'figure') { + if ((parent as Element).name === 'figure') { is_figure_parent = true; break; } @@ -249,11 +250,11 @@ export default class Element extends Node { if (this.name === 'figure') { const children = this.children.filter(node => { if (node.type === 'Comment') return false; - if (node.type === 'Text') return /\S/.test(node.data); + if (node.type === 'Text') return /\S/.test((node as Text).data ); return true; }); - const index = children.findIndex(child => child.name === 'figcaption'); + const index = children.findIndex(child => (child as Element).name === 'figcaption'); if (index !== -1 && (index !== 0 && index !== children.length - 1)) { this.component.warn(children[index], { @@ -320,7 +321,9 @@ export default class Element extends Node { } const value = attribute.get_static_value(); + // @ts-ignore if (value && !aria_role_set.has(value)) { + // @ts-ignore const match = fuzzymatch(value, aria_roles); let message = `A11y: Unknown role '${value}'`; if (match) message += ` (did you mean '${match}'?)`; @@ -359,6 +362,7 @@ export default class Element extends Node { // tabindex-no-positive if (name === 'tabindex') { const value = attribute.get_static_value(); + // @ts-ignore todo is tabindex=true correct case? if (!isNaN(value) && +value > 0) { component.warn(attribute, { code: `a11y-positive-tabindex`, @@ -387,7 +391,7 @@ export default class Element extends Node { let ancestor = this.parent; do { if (ancestor.type === 'InlineComponent') break; - if (ancestor.type === 'Element' && /-/.test(ancestor.name)) break; + if (ancestor.type === 'Element' && /-/.test((ancestor as Element).name)) break; if (ancestor.type === 'IfBlock' || ancestor.type === 'EachBlock') { const type = ancestor.type === 'IfBlock' ? 'if' : 'each'; diff --git a/src/compile/nodes/ElseBlock.ts b/src/compile/nodes/ElseBlock.ts index 61c1aa5455..5f3aa29529 100644 --- a/src/compile/nodes/ElseBlock.ts +++ b/src/compile/nodes/ElseBlock.ts @@ -1,10 +1,11 @@ import map_children from './shared/map_children'; import AbstractBlock from './shared/AbstractBlock'; +import Component from '../Component'; export default class ElseBlock extends AbstractBlock { type: 'ElseBlock'; - constructor(component, parent, scope, info) { + constructor(component: Component, parent, scope, info) { super(component, parent, scope, info); this.children = map_children(component, this, scope, info.children); diff --git a/src/compile/nodes/EventHandler.ts b/src/compile/nodes/EventHandler.ts index f5e7e0e898..dab60858d5 100644 --- a/src/compile/nodes/EventHandler.ts +++ b/src/compile/nodes/EventHandler.ts @@ -5,6 +5,7 @@ import deindent from '../utils/deindent'; import Block from '../render-dom/Block'; export default class EventHandler extends Node { + type: 'EventHandler'; name: string; modifiers: Set; expression: Expression; @@ -65,4 +66,4 @@ export default class EventHandler extends Node { // this.component.add_reference(this.handler_name); return `ctx.${this.handler_name}`; } -} \ No newline at end of file +} diff --git a/src/compile/nodes/Fragment.ts b/src/compile/nodes/Fragment.ts index ec25d41a1c..6025b036a6 100644 --- a/src/compile/nodes/Fragment.ts +++ b/src/compile/nodes/Fragment.ts @@ -3,10 +3,12 @@ import Component from '../Component'; import map_children from './shared/map_children'; import Block from '../render-dom/Block'; import TemplateScope from './shared/TemplateScope'; +import { INode } from './interfaces'; export default class Fragment extends Node { + type: 'Fragment'; block: Block; - children: Node[]; + children: INode[]; scope: TemplateScope; constructor(component: Component, info: any) { @@ -16,4 +18,4 @@ export default class Fragment extends Node { this.scope = scope; this.children = map_children(component, this, scope, info.children); } -} \ No newline at end of file +} diff --git a/src/compile/nodes/Head.ts b/src/compile/nodes/Head.ts index bc6e9bde40..2c08dcd595 100644 --- a/src/compile/nodes/Head.ts +++ b/src/compile/nodes/Head.ts @@ -1,5 +1,4 @@ import Node from './shared/Node'; -import Block from '../render-dom/Block'; import map_children from './shared/map_children'; export default class Head extends Node { diff --git a/src/compile/nodes/InlineComponent.ts b/src/compile/nodes/InlineComponent.ts index 3359e981ed..8b6cd77282 100644 --- a/src/compile/nodes/InlineComponent.ts +++ b/src/compile/nodes/InlineComponent.ts @@ -7,6 +7,7 @@ import Expression from './shared/Expression'; import Component from '../Component'; import Let from './Let'; import TemplateScope from './shared/TemplateScope'; +import { INode } from './interfaces'; export default class InlineComponent extends Node { type: 'InlineComponent'; @@ -16,7 +17,7 @@ export default class InlineComponent extends Node { bindings: Binding[] = []; handlers: EventHandler[] = []; lets: Let[] = []; - children: Node[]; + children: INode[]; scope: TemplateScope; constructor(component: Component, parent, scope, info) { diff --git a/src/compile/nodes/MustacheTag.ts b/src/compile/nodes/MustacheTag.ts index e668987a9c..ac6688d503 100644 --- a/src/compile/nodes/MustacheTag.ts +++ b/src/compile/nodes/MustacheTag.ts @@ -1,3 +1,5 @@ import Tag from './shared/Tag'; -export default class MustacheTag extends Tag {} \ No newline at end of file +export default class MustacheTag extends Tag { + type: 'MustacheTag'; +} diff --git a/src/compile/nodes/PendingBlock.ts b/src/compile/nodes/PendingBlock.ts index 0fd71c0221..5ff7352558 100644 --- a/src/compile/nodes/PendingBlock.ts +++ b/src/compile/nodes/PendingBlock.ts @@ -2,7 +2,7 @@ import map_children from './shared/map_children'; import AbstractBlock from './shared/AbstractBlock'; export default class PendingBlock extends AbstractBlock { - + type: 'PendingBlock'; constructor(component, parent, scope, info) { super(component, parent, scope, info); this.children = map_children(component, parent, scope, info.children); diff --git a/src/compile/nodes/RawMustacheTag.ts b/src/compile/nodes/RawMustacheTag.ts index ada3123410..fc63885942 100644 --- a/src/compile/nodes/RawMustacheTag.ts +++ b/src/compile/nodes/RawMustacheTag.ts @@ -1,3 +1,5 @@ import Tag from './shared/Tag'; -export default class RawMustacheTag extends Tag {} \ No newline at end of file +export default class RawMustacheTag extends Tag { + type: 'RawMustacheTag' +} diff --git a/src/compile/nodes/Slot.ts b/src/compile/nodes/Slot.ts index dbb502b41a..a03fe8c026 100644 --- a/src/compile/nodes/Slot.ts +++ b/src/compile/nodes/Slot.ts @@ -1,17 +1,17 @@ -import Node from './shared/Node'; import Element from './Element'; import Attribute from './Attribute'; import Component from '../Component'; import TemplateScope from './shared/TemplateScope'; +import { INode } from './interfaces'; export default class Slot extends Element { type: 'Element'; name: string; - children: Node[]; + children: INode[]; slot_name: string; values: Map = new Map(); - constructor(component: Component, parent: Node, scope: TemplateScope, info: any) { + constructor(component: Component, parent: INode, scope: TemplateScope, info: any) { super(component, parent, scope, info); info.attributes.forEach(attr => { @@ -68,4 +68,4 @@ export default class Slot extends Element { component.slots.set(this.slot_name, this); } -} \ No newline at end of file +} diff --git a/src/compile/nodes/Text.ts b/src/compile/nodes/Text.ts index 1c31c9d83d..a3b9241ce2 100644 --- a/src/compile/nodes/Text.ts +++ b/src/compile/nodes/Text.ts @@ -1,20 +1,22 @@ import Node from './shared/Node'; import Component from '../Component'; import TemplateScope from './shared/TemplateScope'; +import { INode } from './interfaces'; +import Element from './Element'; export default class Text extends Node { type: 'Text'; data: string; use_space = false; - constructor(component: Component, parent: Node, scope: TemplateScope, info: any) { + constructor(component: Component, parent: INode, scope: TemplateScope, info: any) { super(component, parent, scope, info); this.data = info.data; if (!component.component_options.preserveWhitespace && !/\S/.test(info.data)) { let node = parent; while (node) { - if (node.type === 'Element' && node.name === 'pre') { + if (node.type === 'Element' && (node as Element).name === 'pre') { return; } node = node.parent; @@ -23,4 +25,4 @@ export default class Text extends Node { this.use_space = true; } } -} \ No newline at end of file +} diff --git a/src/compile/nodes/ThenBlock.ts b/src/compile/nodes/ThenBlock.ts index 7e4ed0e5da..7f9bbde0f0 100644 --- a/src/compile/nodes/ThenBlock.ts +++ b/src/compile/nodes/ThenBlock.ts @@ -3,6 +3,7 @@ import TemplateScope from './shared/TemplateScope'; import AbstractBlock from './shared/AbstractBlock'; export default class ThenBlock extends AbstractBlock { + type: 'ThenBlock'; scope: TemplateScope; constructor(component, parent, scope, info) { diff --git a/src/compile/nodes/Title.ts b/src/compile/nodes/Title.ts index fd58d3043d..4c459c181f 100644 --- a/src/compile/nodes/Title.ts +++ b/src/compile/nodes/Title.ts @@ -1,12 +1,14 @@ import Node from './shared/Node'; -import map_children from './shared/map_children'; +import map_children, { Children } from './shared/map_children'; +import Component from '../Component'; export default class Title extends Node { type: 'Title'; - children: any[]; // TODO + should_cache: boolean; + children: Children; - constructor(component, parent, scope, info) { + constructor(component: Component, parent, scope, info) { super(component, parent, scope, info); this.children = map_children(component, parent, scope, info.children); @@ -33,4 +35,4 @@ export default class Title extends Node { ) : true; } -} \ No newline at end of file +} diff --git a/src/compile/nodes/interfaces.ts b/src/compile/nodes/interfaces.ts new file mode 100644 index 0000000000..6613d39769 --- /dev/null +++ b/src/compile/nodes/interfaces.ts @@ -0,0 +1,62 @@ +import Tag from './shared/Tag'; + +import Action from './Action'; +import Animation from './Animation'; +import Attribute from './Attribute'; +import AwaitBlock from './AwaitBlock'; +import Binding from './Binding'; +import Body from './Body'; +import CatchBlock from './CatchBlock'; +import Class from './Class'; +import Comment from './Comment'; +import DebugTag from './DebugTag'; +import EachBlock from './EachBlock'; +import Element from './Element'; +import ElseBlock from './ElseBlock'; +import EventHandler from './EventHandler'; +import Fragment from './Fragment'; +import Head from './Head'; +import IfBlock from './IfBlock'; +import InlineComponent from './InlineComponent'; +import Let from './Let'; +import MustacheTag from './MustacheTag'; +import Options from './Options'; +import PendingBlock from './PendingBlock'; +import RawMustacheTag from './RawMustacheTag'; +import Slot from './Slot'; +import Text from './Text'; +import ThenBlock from './ThenBlock'; +import Title from './Title'; +import Transition from './Transition'; +import Window from './Window'; + +export type INode = Action + | Animation + | Attribute + | AwaitBlock + | Binding + | Body + | CatchBlock + | Class + | Comment + | DebugTag + | EachBlock + | Element + | ElseBlock + | EventHandler + | Fragment + | Head + | IfBlock + | InlineComponent + | Let + | MustacheTag + | Options + | PendingBlock + | RawMustacheTag + | Slot + | Tag + | Text + | ThenBlock + | Title + | Transition + | Window; diff --git a/src/compile/nodes/shared/AbstractBlock.ts b/src/compile/nodes/shared/AbstractBlock.ts index 1dfebd51f0..e1104e4928 100644 --- a/src/compile/nodes/shared/AbstractBlock.ts +++ b/src/compile/nodes/shared/AbstractBlock.ts @@ -1,10 +1,11 @@ import Block from '../../render-dom/Block'; import Component from './../../Component'; import Node from './Node'; +import { INode } from '../interfaces'; export default class AbstractBlock extends Node { block: Block; - children: Node[]; + children: INode[]; constructor(component: Component, parent, scope, info: any) { super(component, parent, scope, info); diff --git a/src/compile/nodes/shared/Expression.ts b/src/compile/nodes/shared/Expression.ts index fc188e9673..f7c9582115 100644 --- a/src/compile/nodes/shared/Expression.ts +++ b/src/compile/nodes/shared/Expression.ts @@ -12,6 +12,7 @@ import TemplateScope from './TemplateScope'; import get_object from '../../utils/get_object'; import { nodes_match } from '../../../utils/nodes_match'; import Block from '../../render-dom/Block'; +import { INode } from '../interfaces'; const binary_operators: Record = { '**': 15, @@ -61,10 +62,12 @@ const precedence: Record number> = { SequenceExpression: () => 0 }; +type Owner = Wrapper | INode; + export default class Expression { - type = 'Expression'; + type: 'Expression' = 'Expression'; component: Component; - owner: Wrapper; + owner: Owner; node: any; snippet: string; references: Set; @@ -81,7 +84,8 @@ export default class Expression { rendered: string; - constructor(component: Component, owner: Wrapper, template_scope: TemplateScope, info) { + // todo: owner type + constructor(component: Component, owner: Owner, template_scope: TemplateScope, info) { // TODO revert to direct property access in prod? Object.defineProperties(this, { component: { @@ -92,6 +96,7 @@ export default class Expression { this.node = info; this.template_scope = template_scope; this.owner = owner; + // @ts-ignore this.is_synthetic = owner.is_synthetic; const { dependencies, contextual_dependencies } = this; @@ -510,4 +515,4 @@ function is_contextual(component: Component, scope: TemplateScope, name: string) // assume contextual return true; -} \ No newline at end of file +} diff --git a/src/compile/nodes/shared/Node.ts b/src/compile/nodes/shared/Node.ts index b6eaf9965d..daba0d62b2 100644 --- a/src/compile/nodes/shared/Node.ts +++ b/src/compile/nodes/shared/Node.ts @@ -1,21 +1,23 @@ import Attribute from './../Attribute'; import Component from './../../Component'; +import { INode } from '../interfaces'; +import Text from '../Text'; export default class Node { readonly start: number; readonly end: number; readonly component: Component; - readonly parent: Node; + readonly parent: INode; readonly type: string; - prev?: Node; - next?: Node; + prev?: INode; + next?: INode; can_use_innerhtml: boolean; var: string; attributes: Attribute[]; - constructor(component: Component, parent, scope, info: any) { + constructor(component: Component, parent: any, scope: any, info: { start: number; end: number; type: string; }) { this.start = info.start; this.end = info.end; this.type = info.type; @@ -55,7 +57,7 @@ export default class Node { if (attribute.chunks.length === 0) return ''; if (attribute.chunks.length === 1 && attribute.chunks[0].type === 'Text') { - return attribute.chunks[0].data; + return (attribute.chunks[0] as Text).data; } return null; diff --git a/src/compile/nodes/shared/Tag.ts b/src/compile/nodes/shared/Tag.ts index 94971bef11..bc826458d9 100644 --- a/src/compile/nodes/shared/Tag.ts +++ b/src/compile/nodes/shared/Tag.ts @@ -2,6 +2,7 @@ import Node from './Node'; import Expression from './Expression'; export default class Tag extends Node { + type: 'MustacheTag' | 'RawMustacheTag'; expression: Expression; should_cache: boolean; @@ -14,4 +15,4 @@ export default class Tag extends Node { (this.expression.dependencies.size && scope.names.has(info.expression.name)) ); } -} \ No newline at end of file +} diff --git a/src/compile/nodes/shared/TemplateScope.ts b/src/compile/nodes/shared/TemplateScope.ts index abd366642e..5f30d0c883 100644 --- a/src/compile/nodes/shared/TemplateScope.ts +++ b/src/compile/nodes/shared/TemplateScope.ts @@ -2,6 +2,7 @@ import EachBlock from '../EachBlock'; import ThenBlock from '../ThenBlock'; import CatchBlock from '../CatchBlock'; import InlineComponent from '../InlineComponent'; +import Element from '../Element'; type NodeWithScope = EachBlock | ThenBlock | CatchBlock | InlineComponent | Element; @@ -41,4 +42,4 @@ export default class TemplateScope { const owner = this.get_owner(name); return owner && (owner.type === 'Element' || owner.type === 'InlineComponent'); } -} \ No newline at end of file +} diff --git a/src/compile/nodes/shared/map_children.ts b/src/compile/nodes/shared/map_children.ts index b903853016..71d764a889 100644 --- a/src/compile/nodes/shared/map_children.ts +++ b/src/compile/nodes/shared/map_children.ts @@ -14,9 +14,11 @@ import Slot from '../Slot'; import Text from '../Text'; import Title from '../Title'; import Window from '../Window'; -import Node from './Node'; +import { Node } from '../../../interfaces'; -function get_constructor(type): typeof Node { +export type Children = ReturnType; + +function get_constructor(type) { switch (type) { case 'AwaitBlock': return AwaitBlock; case 'Body': return Body; @@ -38,7 +40,7 @@ function get_constructor(type): typeof Node { } } -export default function map_children(component, parent, scope, children: any[]) { +export default function map_children(component, parent, scope, children: Node[]) { let last = null; return children.map(child => { const constructor = get_constructor(child.type); diff --git a/src/compile/utils/add_to_set.ts b/src/compile/utils/add_to_set.ts index 262d7d32e7..b37e0db931 100644 --- a/src/compile/utils/add_to_set.ts +++ b/src/compile/utils/add_to_set.ts @@ -1,5 +1,6 @@ -export default function add_to_set(a: Set, b: Set) { +export default function add_to_set(a: Set, b: Set | Array) { + // @ts-ignore b.forEach(item => { a.add(item); }); -} \ No newline at end of file +} diff --git a/src/compile/utils/scope.ts b/src/compile/utils/scope.ts index 6488986d83..a3e341be49 100644 --- a/src/compile/utils/scope.ts +++ b/src/compile/utils/scope.ts @@ -9,7 +9,7 @@ export function create_scopes(expression: Node) { let scope = new Scope(null, false); walk(expression, { - enter(node: Node, parent: Node) { + enter(node, parent) { if (node.type === 'ImportDeclaration') { node.specifiers.forEach(specifier => { scope.declarations.set(specifier.local.name, specifier); @@ -25,7 +25,7 @@ export function create_scopes(expression: Node) { if (node.id) scope.declarations.set(node.id.name, node); } - node.params.forEach((param: Node) => { + node.params.forEach((param) => { extract_names(param).forEach(name => { scope.declarations.set(name, node); }); diff --git a/src/compile/utils/stringify_attribute.ts b/src/compile/utils/stringify_attribute.ts index 9df2d18344..ee3450edbb 100644 --- a/src/compile/utils/stringify_attribute.ts +++ b/src/compile/utils/stringify_attribute.ts @@ -1,11 +1,10 @@ import Attribute from '../nodes/Attribute'; -import Node from '../nodes/shared/Node'; import { escape_template, escape } from './stringify'; import { snip } from './snip'; export function stringify_attribute(attribute: Attribute, is_ssr: boolean) { return attribute.chunks - .map((chunk: Node) => { + .map((chunk) => { if (chunk.type === 'Text') { return escape_template(escape(chunk.data).replace(/"/g, '"')); } @@ -15,4 +14,4 @@ export function stringify_attribute(attribute: Attribute, is_ssr: boolean) { : '${' + snip(chunk) + '}'; }) .join(''); -} \ No newline at end of file +} From 231603df7bbf0ff9bb5ecf573ccabaa9211bfea5 Mon Sep 17 00:00:00 2001 From: Bogdan Savluk Date: Tue, 21 May 2019 20:56:01 +0200 Subject: [PATCH 4/8] fix compile/render-ssr typings --- src/compile/render-ssr/Renderer.ts | 7 ++++++- src/compile/render-ssr/handlers/AwaitBlock.ts | 8 ++++---- src/compile/render-ssr/handlers/Comment.ts | 8 ++++---- src/compile/render-ssr/handlers/DebugTag.ts | 9 +++++---- src/compile/render-ssr/handlers/EachBlock.ts | 6 ++++-- src/compile/render-ssr/handlers/Element.ts | 13 +++++++++---- src/compile/render-ssr/handlers/Head.ts | 7 +++++-- src/compile/render-ssr/handlers/HtmlTag.ts | 6 ++++-- src/compile/render-ssr/handlers/IfBlock.ts | 7 ++++--- src/compile/render-ssr/handlers/InlineComponent.ts | 11 +++++++---- src/compile/render-ssr/handlers/Slot.ts | 6 ++++-- src/compile/render-ssr/handlers/Tag.ts | 6 +++--- src/compile/render-ssr/handlers/Text.ts | 9 ++++++--- src/compile/render-ssr/handlers/Title.ts | 7 +++++-- src/compile/render-ssr/index.ts | 8 +++++--- 15 files changed, 75 insertions(+), 43 deletions(-) diff --git a/src/compile/render-ssr/Renderer.ts b/src/compile/render-ssr/Renderer.ts index c97965de14..ef1d16429e 100644 --- a/src/compile/render-ssr/Renderer.ts +++ b/src/compile/render-ssr/Renderer.ts @@ -12,6 +12,7 @@ import Tag from './handlers/Tag'; import Text from './handlers/Text'; import Title from './handlers/Title'; import { AppendTarget, CompileOptions } from '../../interfaces'; +import { INode } from '../nodes/interfaces'; type Handler = (node: any, renderer: Renderer, options: CompileOptions) => void; @@ -36,6 +37,10 @@ const handlers: Record = { Window: noop }; +export interface RenderOptions extends CompileOptions{ + locate: (c: number) => { line: number; column: number; }; +}; + export default class Renderer { has_bindings = false; code = ''; @@ -51,7 +56,7 @@ export default class Renderer { } } - render(nodes, options) { + render(nodes: INode[], options: RenderOptions) { nodes.forEach(node => { const handler = handlers[node.type]; diff --git a/src/compile/render-ssr/handlers/AwaitBlock.ts b/src/compile/render-ssr/handlers/AwaitBlock.ts index bbc4a15e05..85bf7b3135 100644 --- a/src/compile/render-ssr/handlers/AwaitBlock.ts +++ b/src/compile/render-ssr/handlers/AwaitBlock.ts @@ -1,8 +1,8 @@ -import Renderer from '../Renderer'; -import { CompileOptions } from '../../../interfaces'; +import Renderer, { RenderOptions } from '../Renderer'; import { snip } from '../../utils/snip'; +import AwaitBlock from '../../nodes/AwaitBlock'; -export default function(node, renderer: Renderer, options: CompileOptions) { +export default function(node: AwaitBlock, renderer: Renderer, options: RenderOptions) { renderer.append('${(function(__value) { if(@is_promise(__value)) return `'); renderer.render(node.pending.children, options); @@ -13,4 +13,4 @@ export default function(node, renderer: Renderer, options: CompileOptions) { const snippet = snip(node.expression); renderer.append(`\`;}(__value);}(${snippet})) }`); -} \ No newline at end of file +} diff --git a/src/compile/render-ssr/handlers/Comment.ts b/src/compile/render-ssr/handlers/Comment.ts index 4517faace5..237c260230 100644 --- a/src/compile/render-ssr/handlers/Comment.ts +++ b/src/compile/render-ssr/handlers/Comment.ts @@ -1,8 +1,8 @@ -import Renderer from '../Renderer'; -import { CompileOptions } from '../../../interfaces'; +import Renderer, { RenderOptions } from '../Renderer'; +import Comment from '../../nodes/Comment'; -export default function(node, renderer: Renderer, options: CompileOptions) { +export default function(node: Comment, renderer: Renderer, options: RenderOptions) { if (options.preserveComments) { renderer.append(``); } -} \ No newline at end of file +} diff --git a/src/compile/render-ssr/handlers/DebugTag.ts b/src/compile/render-ssr/handlers/DebugTag.ts index b04d541105..3fd7584d57 100644 --- a/src/compile/render-ssr/handlers/DebugTag.ts +++ b/src/compile/render-ssr/handlers/DebugTag.ts @@ -1,9 +1,10 @@ import { stringify } from '../../utils/stringify'; - -export default function(node, renderer, options) { +import DebugTag from '../../nodes/DebugTag'; +import Renderer, { RenderOptions } from '../Renderer'; +export default function(node: DebugTag, renderer: Renderer, options: RenderOptions) { if (!options.dev) return; - const filename = options.file || null; + const filename = options.filename || null; const { line, column } = options.locate(node.start + 1); const obj = node.expressions.length === 0 @@ -15,4 +16,4 @@ export default function(node, renderer, options) { const str = '${@debug(' + `${filename && stringify(filename)}, ${line}, ${column}, ${obj})}`; renderer.append(str); -} \ No newline at end of file +} diff --git a/src/compile/render-ssr/handlers/EachBlock.ts b/src/compile/render-ssr/handlers/EachBlock.ts index 3731093a9b..5ed27dff15 100644 --- a/src/compile/render-ssr/handlers/EachBlock.ts +++ b/src/compile/render-ssr/handlers/EachBlock.ts @@ -1,6 +1,8 @@ import { snip } from '../../utils/snip'; +import Renderer, { RenderOptions } from '../Renderer'; +import EachBlock from '../../nodes/EachBlock'; -export default function(node, renderer, options) { +export default function(node: EachBlock, renderer: Renderer, options: RenderOptions) { const snippet = snip(node.expression); const { start, end } = node.context_node; @@ -24,4 +26,4 @@ export default function(node, renderer, options) { } renderer.append('}'); -} \ No newline at end of file +} diff --git a/src/compile/render-ssr/handlers/Element.ts b/src/compile/render-ssr/handlers/Element.ts index 7717be48e3..fc6bc5b969 100644 --- a/src/compile/render-ssr/handlers/Element.ts +++ b/src/compile/render-ssr/handlers/Element.ts @@ -5,6 +5,9 @@ import Node from '../../nodes/shared/Node'; import { snip } from '../../utils/snip'; import { stringify_attribute } from '../../utils/stringify_attribute'; import { get_slot_scope } from './shared/get_slot_scope'; +import Renderer, { RenderOptions } from '../Renderer'; +import Element from '../../nodes/Element'; +import Text from '../../nodes/Text'; // source: https://gist.github.com/ArjanSchouten/0b8574a6ad7f5065a5e7 const boolean_attributes = new Set([ @@ -47,15 +50,17 @@ const boolean_attributes = new Set([ 'translate' ]); -export default function(node, renderer, options) { +export default function(node: Element, renderer: Renderer, options: RenderOptions & { + slot_scopes: Map; +}) { let opening_tag = `<${node.name}`; let textarea_contents; // awkward special case const slot = node.get_static_attribute_value('slot'); const component = node.find_nearest(/InlineComponent/); if (slot && component) { - const slot = node.attributes.find((attribute: Node) => attribute.name === 'slot'); - const slot_name = slot.chunks[0].data; + const slot = node.attributes.find((attribute) => attribute.name === 'slot'); + const slot_name = (slot.chunks[0] as Text).data; const target = renderer.targets[renderer.targets.length - 1]; target.slot_stack.push(slot_name); target.slots[slot_name] = ''; @@ -160,4 +165,4 @@ export default function(node, renderer, options) { if (!is_void(node.name)) { renderer.append(``); } -} \ No newline at end of file +} diff --git a/src/compile/render-ssr/handlers/Head.ts b/src/compile/render-ssr/handlers/Head.ts index 656759af3c..ecd32cc0ef 100644 --- a/src/compile/render-ssr/handlers/Head.ts +++ b/src/compile/render-ssr/handlers/Head.ts @@ -1,7 +1,10 @@ -export default function(node, renderer, options) { +import Renderer, { RenderOptions } from '../Renderer'; +import Head from '../../nodes/Head'; + +export default function(node: Head, renderer: Renderer, options: RenderOptions) { renderer.append('${($$result.head += `'); renderer.render(node.children, options); renderer.append('`, "")}'); -} \ No newline at end of file +} diff --git a/src/compile/render-ssr/handlers/HtmlTag.ts b/src/compile/render-ssr/handlers/HtmlTag.ts index 7562186a4b..84e2e1f573 100644 --- a/src/compile/render-ssr/handlers/HtmlTag.ts +++ b/src/compile/render-ssr/handlers/HtmlTag.ts @@ -1,5 +1,7 @@ import { snip } from '../../utils/snip'; +import Renderer, { RenderOptions } from '../Renderer'; +import RawMustacheTag from '../../nodes/RawMustacheTag'; -export default function(node, renderer, options) { +export default function(node: RawMustacheTag, renderer: Renderer, options: RenderOptions) { renderer.append('${' + snip(node.expression) + '}'); -} \ No newline at end of file +} diff --git a/src/compile/render-ssr/handlers/IfBlock.ts b/src/compile/render-ssr/handlers/IfBlock.ts index cbe505fef8..c841f1d593 100644 --- a/src/compile/render-ssr/handlers/IfBlock.ts +++ b/src/compile/render-ssr/handlers/IfBlock.ts @@ -1,6 +1,7 @@ import { snip } from '../../utils/snip'; - -export default function(node, renderer, options) { +import IfBlock from '../../nodes/IfBlock'; +import Renderer, { RenderOptions } from '../Renderer'; +export default function(node: IfBlock, renderer: Renderer, options: RenderOptions) { const snippet = snip(node.expression); renderer.append('${ ' + snippet + ' ? `'); @@ -14,4 +15,4 @@ export default function(node, renderer, options) { } renderer.append('` }'); -} \ No newline at end of file +} diff --git a/src/compile/render-ssr/handlers/InlineComponent.ts b/src/compile/render-ssr/handlers/InlineComponent.ts index bc58be5df9..94fdcfd434 100644 --- a/src/compile/render-ssr/handlers/InlineComponent.ts +++ b/src/compile/render-ssr/handlers/InlineComponent.ts @@ -1,14 +1,17 @@ import { escape, escape_template, stringify } from '../../utils/stringify'; import { quote_name_if_necessary } from '../../../utils/names'; import { snip } from '../../utils/snip'; -import Renderer from '../Renderer'; +import Renderer, { RenderOptions } from '../Renderer'; import { stringify_props } from '../../utils/stringify_props'; import { get_slot_scope } from './shared/get_slot_scope'; import { AppendTarget } from '../../../interfaces'; +import InlineComponent from '../../nodes/InlineComponent'; +import { INode } from '../../nodes/interfaces'; +import Text from '../../nodes/Text'; -function stringify_attribute(chunk: Node) { +function stringify_attribute(chunk: INode) { if (chunk.type === 'Text') { - return escape_template(escape(chunk.data)); + return escape_template(escape((chunk as Text).data)); } return '${@escape(' + snip(chunk) + ')}'; @@ -30,7 +33,7 @@ function get_attribute_value(attribute) { return '`' + attribute.chunks.map(stringify_attribute).join('') + '`'; } -export default function(node, renderer: Renderer, options) { +export default function(node: InlineComponent, renderer: Renderer, options: RenderOptions) { const binding_props = []; const binding_fns = []; diff --git a/src/compile/render-ssr/handlers/Slot.ts b/src/compile/render-ssr/handlers/Slot.ts index b2e67f9e79..087519979b 100644 --- a/src/compile/render-ssr/handlers/Slot.ts +++ b/src/compile/render-ssr/handlers/Slot.ts @@ -1,7 +1,9 @@ import { quote_prop_if_necessary } from '../../../utils/names'; import get_slot_data from '../../utils/get_slot_data'; +import Renderer, { RenderOptions } from '../Renderer'; +import Slot from '../../nodes/Slot'; -export default function(node, renderer, options) { +export default function(node: Slot, renderer: Renderer, options: RenderOptions) { const prop = quote_prop_if_necessary(node.slot_name); const slot_data = get_slot_data(node.values, true); @@ -13,4 +15,4 @@ export default function(node, renderer, options) { renderer.render(node.children, options); renderer.append(`\`}`); -} \ No newline at end of file +} diff --git a/src/compile/render-ssr/handlers/Tag.ts b/src/compile/render-ssr/handlers/Tag.ts index eb887b8688..d03f46fe0a 100644 --- a/src/compile/render-ssr/handlers/Tag.ts +++ b/src/compile/render-ssr/handlers/Tag.ts @@ -1,6 +1,6 @@ import { snip } from '../../utils/snip'; - -export default function(node, renderer, options) { +import Renderer, { RenderOptions } from '../Renderer'; +export default function(node, renderer: Renderer, options: RenderOptions) { const snippet = snip(node.expression); renderer.append( @@ -10,4 +10,4 @@ export default function(node, renderer, options) { ? '${' + snippet + '}' : '${@escape(' + snippet + ')}' ); -} \ No newline at end of file +} diff --git a/src/compile/render-ssr/handlers/Text.ts b/src/compile/render-ssr/handlers/Text.ts index e794025370..1d2906d10a 100644 --- a/src/compile/render-ssr/handlers/Text.ts +++ b/src/compile/render-ssr/handlers/Text.ts @@ -1,14 +1,17 @@ import { escape_html, escape_template, escape } from '../../utils/stringify'; +import Renderer, { RenderOptions } from '../Renderer'; +import Text from '../../nodes/Text'; +import Element from '../../nodes/Element'; -export default function(node, renderer, options) { +export default function(node: Text, renderer: Renderer, options: RenderOptions) { let text = node.data; if ( !node.parent || node.parent.type !== 'Element' || - (node.parent.name !== 'script' && node.parent.name !== 'style') + ((node.parent as Element).name !== 'script' && (node.parent as Element).name !== 'style') ) { // unless this Text node is inside a