feat(compiler): element codegen

packages/compiler-core/src/transforms/element.ts

@@ -24,11 +24,16 @@ export const prepareElementForCodegen: NodeTransform = (node, context) => {
       node.tagType === ElementTypes.ELEMENT ||
       node.tagType === ElementTypes.COMPONENT
     ) {
-      const isComponent = node.tagType === ElementTypes.ELEMENT
+      const isComponent = node.tagType === ElementTypes.COMPONENT
       const hasProps = node.props.length > 0
       const hasChildren = node.children.length > 0
       let runtimeDirectives: DirectiveNode[] | undefined
 
+      if (isComponent) {
+        // TODO inject import for `resolveComponent`
+        // TODO inject statement for resolving component
+      }
+
       const args: CallExpression['arguments'] = [
         // TODO inject resolveComponent dep to root
         isComponent ? node.tag : `"${node.tag}"`
@@ -49,9 +54,11 @@ export const prepareElementForCodegen: NodeTransform = (node, context) => {
       }
 
       const { loc } = node
+      // TODO inject import for `h`
       const vnode = createCallExpression(`h`, args, loc)
 
-      if (runtimeDirectives) {
+      if (runtimeDirectives && runtimeDirectives.length) {
+        // TODO inject import for `applyDirectives`
         node.codegenNode = createCallExpression(
           `applyDirectives`,
           [
@@ -170,7 +177,8 @@ function createDirectiveArgs(
   dir: DirectiveNode,
   context: TransformContext
 ): ArrayExpression {
-  // TODO inject resolveDirective dep to root
+  // TODO inject import for `resolveDirective`
+  // TODO inject statement for resolving directive
   const dirArgs: ArrayExpression['elements'] = [dir.name]
   const { loc } = dir
   if (dir.exp) dirArgs.push(dir.exp)

packages/compiler-core/src/transforms/expression.ts

@@ -0,0 +1,9 @@
+// - Parse expressions in templates into more detailed JavaScript ASTs so that
+//   source-maps are more accurate
+//
+// - Prefix identifiers with `_ctx.` so that they are accessed from the render
+//   context
+//
+// - This transform is only applied in non-browser builds because it relies on
+//   an additional JavaScript parser. In the browser, there is no source-map
+//   support and the code is wrapped in `with (this) { ... }`.

packages/compiler-core/src/transforms/vFor.ts

@@ -7,13 +7,17 @@ const forAliasRE = /([\s\S]*?)(?:(?<=\))|\s+)(?:in|of)\s+([\s\S]*)/
 const forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/
 const stripParensRE = /^\(|\)$/g
 
+export const RENDER_LIST_HELPER = `renderList`
+
 export const transformFor = createStructuralDirectiveTransform(
   'for',
   (node, dir, context) => {
     if (dir.exp) {
+      // TODO inject helper import
       const aliases = parseAliasExpressions(dir.exp.content)
 
       if (aliases) {
+        // TODO inject identifiers to context
         context.replaceNode({
           type: NodeTypes.FOR,
           loc: node.loc,