@riotjs/compiler - npm Package Compare versions

Comparing version 4.0.4 to 4.1.0

CHANGELOG.md

 # Compiler Changes
 
+### v4.1.0
+- Add support for the slot attribute binding
 
@@ -4,0 +6,0 @@ ### v4.0.4

package.json

 {
   "name": "@riotjs/compiler",
-  "version": "4.0.4",
+  "version": "4.1.0",
   "description": "Compiler for riot .tag files",
@@ -19,4 +19,4 @@ "main": "dist/index.js",
     "postest": "npm run cov-html",
-    "test": "npm run lint && nyc mocha -r reify test/*.spec.js test/**/*.spec.js",
-    "debug": "mocha --inspect --inspect-brk -r reify test/*.spec.js test/**/*.spec.js",
+    "test": "npm run lint && nyc mocha -r esm test/*.spec.js test/**/*.spec.js",
+    "debug": "mocha --inspect --inspect-brk -r esm test/*.spec.js test/**/*.spec.js",
     "prepublishOnly": "npm run build && npm run test"
@@ -41,5 +41,5 @@ },
     "eslint-config-riot": "^2.0.0",
+    "esm": "^3.2.22",
     "mocha": "^6.1.4",
     "nyc": "^14.1.0",
-    "reify": "^0.18.1",
     "rollup": "^1.11.3",
@@ -46,0 +46,0 @@ "rollup-plugin-alias": "^1.5.1",

src/generators/css/index.js

@@ -78,3 +78,3 @@ import {builders, types} from '../../utils/build-types'
   const cssNode = sourceNode.text
-  const preprocessorOutput = preprocess('css', preprocessorName, meta, source, cssNode)
+  const preprocessorOutput = preprocess('css', preprocessorName, meta, cssNode)
   const cssCode = (options.scopedCss ?
@@ -81,0 +81,0 @@ scopedCSS(meta.tagName, preprocessorOutput.code) :

src/generators/javascript/index.js

@@ -71,3 +71,3 @@ import {TAG_LOGIC_PROPERTY} from '../../constants'
   const { options } = meta
-  const preprocessorOutput = preprocess('javascript', preprocessorName, meta, source, {
+  const preprocessorOutput = preprocess('javascript', preprocessorName, meta, {
     ...sourceNode,
@@ -74,0 +74,0 @@ text: javascriptNode

src/generators/template/bindings/each.js

@@ -12,5 +12,3 @@ import {
 import {
-  cloneNodeWithoutSelectorAttribute,
   createASTFromExpression,
-  createRootNode,
   createSelectorProperties,
@@ -23,3 +21,2 @@ createTemplateProperty,
   getName,
-  isCustomNode,
   toScopedFunction
@@ -30,8 +27,7 @@ } from '../utils'
 import {nullNode, simplePropertyNode} from '../../../utils/custom-ast-nodes'
-import build from '../builder'
 import {builders} from '../../../utils/build-types'
 import compose from 'cumpa'
+import {createNestedBindings} from '../builder'
 import generateJavascript from '../../../utils/generate-javascript'
 import panic from '../../../utils/panic'
-import tagBinding from './tag'
 
@@ -90,3 +86,2 @@ const getEachItemName = expression => isSequenceExpression(expression.left) ? expression.left.expressions[0] : expression.left
 
-
 /**
@@ -96,3 +91,3 @@ * Transform a RiotParser.Node.Tag into an each binding
  * @param   { string } selectorAttribute - attribute needed to select the target node
- * @param   { stiring } sourceFile - source file path
+ * @param   { string } sourceFile - source file path
  * @param   { string } sourceCode - original source
@@ -107,3 +102,2 @@ * @returns { AST.Node } an each binding node
   ].map(f => f(sourceNode))
-  const mightBeARiotComponent = isCustomNode(sourceNode)
   const attributeOrNull = attribute => attribute ? toScopedFunction(getAttributeExpression(attribute), sourceFile, sourceCode) : nullNode()
@@ -121,13 +115,3 @@
     simplePropertyNode(BINDING_CONDITION_KEY, attributeOrNull(ifAttribute)),
-    createTemplateProperty(mightBeARiotComponent ?
-      [null, [
-        tagBinding(
-          cloneNodeWithoutSelectorAttribute(sourceNode),
-          null,
-          sourceFile,
-          sourceCode
-        )]
-      ] :
-      build(createRootNode(sourceNode), sourceFile, sourceCode)
-    ),
+    createTemplateProperty(createNestedBindings(sourceNode, sourceFile, sourceCode)),
     ...createSelectorProperties(selectorAttribute),
@@ -134,0 +118,0 @@ ...compose(generateEachExpressionProperties, getAttributeExpression)(eachAttribute)

src/generators/template/bindings/if.js

@@ -8,16 +8,11 @@ import {
 import {
-  cloneNodeWithoutSelectorAttribute,
-  createRootNode,
   createSelectorProperties,
   createTemplateProperty,
   findIfAttribute,
-  isCustomNode,
   toScopedFunction
 } from '../utils'
-import build from '../builder'
 import {builders} from '../../../utils/build-types'
+import {createNestedBindings} from '../builder'
 import {simplePropertyNode} from '../../../utils/custom-ast-nodes'
-import tagBinding from './tag'
 
-
 /**
@@ -29,7 +24,6 @@ * Transform a RiotParser.Node.Tag into an if binding
  * @param   { string } sourceCode - original source
- * @returns { AST.Node } an each binding node
+ * @returns { AST.Node } an if binding node
  */
 export default function createIfBinding(sourceNode, selectorAttribute, sourceFile, sourceCode) {
   const ifAttribute = findIfAttribute(sourceNode)
-  const mightBeARiotComponent = isCustomNode(sourceNode)
 
@@ -49,14 +43,4 @@ return builders.objectExpression([
     ...createSelectorProperties(selectorAttribute),
-    createTemplateProperty(mightBeARiotComponent ?
-      [null, [
-        tagBinding(
-          cloneNodeWithoutSelectorAttribute(sourceNode),
-          null,
-          sourceFile,
-          sourceCode
-        )]
-      ] :
-      build(createRootNode(sourceNode), sourceFile, sourceCode)
-    )
+    createTemplateProperty(createNestedBindings(sourceNode, sourceFile, sourceCode))
   ])
 }

src/generators/template/bindings/simple.js

@@ -34,3 +34,3 @@ import {
  * @param   {RiotParser.Node} sourceNode - any kind of node parsed via riot parser
- * @param   {stiring} sourceFile - source file path
+ * @param   {string} sourceFile - source file path
  * @param   {string} sourceCode - original source
@@ -47,3 +47,3 @@ * @returns {Array} array containing all the attribute expressions
  * @param   {RiotParser.Node} sourceNode - any kind of node parsed via riot parser
- * @param   {stiring} sourceFile - source file path
+ * @param   {string} sourceFile - source file path
  * @param   {string} sourceCode - original source
@@ -70,3 +70,3 @@ * @returns {Array} array containing all the text node expressions
  * @param   { string } selectorAttribute - attribute needed to select the target node
- * @param   { stiring } sourceFile - source file path
+ * @param   { string } sourceFile - source file path
  * @param   { string } sourceCode - original source
@@ -73,0 +73,0 @@ * @returns { AST.Node } an each binding node

src/generators/template/bindings/tag.js

@@ -58,3 +58,3 @@ import {
  * @param   {RiotParser.Node.Tag} sourceNode - slot root node
- * @param   {stiring} sourceFile - source file path
+ * @param   {string} sourceFile - source file path
  * @param   {string} sourceCode - original source
@@ -79,2 +79,40 @@ * @returns {AST.Node} ast node containing the slot object properties
 /**
+ * Create the AST array containing the slots
+ * @param   { RiotParser.Node.Tag } sourceNode - the custom tag
+ * @param   { string } sourceFile - source file path
+ * @param   { string } sourceCode - original source
+ * @returns {AST.ArrayExpression} array containing the attributes to bind
+ */
+function createSlotsArray(sourceNode, sourceFile, sourceCode) {
+  return builders.arrayExpression([
+    ...compose(
+      slots => slots.map(([key, value]) => buildSlot(key, value, sourceFile, sourceCode)),
+      slots => slots.filter(([,value]) => value),
+      Object.entries,
+      groupSlots
+    )(sourceNode)
+  ])
+}
+
+/**
+ * Create the AST array containing the attributes to bind to this node
+ * @param   { RiotParser.Node.Tag } sourceNode - the custom tag
+ * @param   { string } selectorAttribute - attribute needed to select the target node
+ * @param   { string } sourceFile - source file path
+ * @param   { string } sourceCode - original source
+ * @returns {AST.ArrayExpression} array containing the slot objects
+ */
+function createBindingAttributes(sourceNode, selectorAttribute, sourceFile, sourceCode) {
+  const createAttributeExpression = attribute => attributeExpression(attribute, sourceFile, sourceCode)
+
+  return builders.arrayExpression([
+    ...compose(
+      attributes => attributes.map(createAttributeExpression),
+      attributes => getAttributesWithoutSelector(attributes, selectorAttribute), // eslint-disable-line
+      cleanAttributes
+    )(sourceNode)
+  ])
+}
+
+/**
  * Find the slot attribute if it exists
@@ -88,3 +126,2 @@ * @param   {RiotParser.Node.Tag} sourceNode - the custom tag
 
-
 /**
@@ -94,3 +131,3 @@ * Transform a RiotParser.Node.Tag into a tag binding
  * @param   { string } selectorAttribute - attribute needed to select the target node
- * @param   { stiring } sourceFile - source file path
+ * @param   { string } sourceFile - source file path
  * @param   { string } sourceCode - original source
@@ -100,4 +137,2 @@ * @returns { AST.Node } tag binding node
 export default function createTagBinding(sourceNode, selectorAttribute, sourceFile, sourceCode) {
-  const createAttributeExpression = attribute => attributeExpression(attribute, sourceFile, sourceCode)
-
   return builders.objectExpression([
@@ -116,19 +151,9 @@ simplePropertyNode(BINDING_TYPE_KEY,
     ),
-    simplePropertyNode(BINDING_SLOTS_KEY, builders.arrayExpression([
-      ...compose(
-        slots => slots.map(([key, value]) => buildSlot(key, value, sourceFile, sourceCode)),
-        slots => slots.filter(([,value]) => value),
-        Object.entries,
-        groupSlots
-      )(sourceNode)
-    ])),
-    simplePropertyNode(BINDING_ATTRIBUTES_KEY, builders.arrayExpression([
-      ...compose(
-        attributes => attributes.map(createAttributeExpression),
-        attributes => getAttributesWithoutSelector(attributes, selectorAttribute), // eslint-disable-line
-        cleanAttributes
-      )(sourceNode)
-    ])),
+    simplePropertyNode(BINDING_SLOTS_KEY, createSlotsArray(sourceNode, sourceFile, sourceCode)),
+    simplePropertyNode(
+      BINDING_ATTRIBUTES_KEY,
+      createBindingAttributes(sourceNode, selectorAttribute, sourceFile, sourceCode)
+    ),
     ...createSelectorProperties(selectorAttribute)
   ])
 }

src/generators/template/builder.js

 import {
+  cloneNodeWithoutSelectorAttribute,
   closeTag,
   createBindingSelector,
+  createRootNode,
   getChildrenNodes,
@@ -11,2 +13,3 @@ getNodeAttributes,
   isRootNode,
+  isSlotNode,
   isStaticNode,
@@ -23,2 +26,3 @@ isTagNode,
 import simpleBinding from './bindings/simple'
+import slotBinding from './bindings/slot'
 import tagBinding from './bindings/tag'
@@ -53,3 +57,3 @@
  * @param   {RiotParser.Node} sourceNode - any kind of node parsed via riot parser
- * @param   {stiring} sourceFile - source file path
+ * @param   {string} sourceFile - source file path
  * @param   {string} sourceCode - original source
@@ -72,3 +76,3 @@ * @param   {BuildingState} state - state representing the current building tree state during the recursion
  * @param   {RiotParser.Node} sourceNode - any kind of node parsed via riot parser
- * @param   {stiring} sourceFile - source file path
+ * @param   {string} sourceFile - source file path
  * @param   {string} sourceCode - original source
@@ -93,2 +97,5 @@ * @param   {BuildingState} state - state representing the current building tree state during the recursion
     return [tagOpeningHTML, [tagBinding(cloneNode, bindingsSelector, sourceFile, sourceCode)]]
+  // slot tag
+  case isSlotNode(cloneNode):
+    return [tagOpeningHTML, [slotBinding(cloneNode, bindingsSelector)]]
   // this node has expressions bound to it
@@ -103,3 +110,3 @@ default:
  * @param   {RiotParser.Node} sourceNode - any kind of node parsed via riot parser
- * @param   {stiring} sourceFile - source file path
+ * @param   {string} sourceFile - source file path
  * @param   {string} sourceCode - original source
@@ -116,5 +123,25 @@ * @param   {BuildingState} state - state representing the current building tree state during the recursion
 /**
+ * Create the tag binding
+ * @param   { RiotParser.Node.Tag } sourceNode - tag containing the each attribute
+ * @param   { string } sourceFile - source file path
+ * @param   { string } sourceCode - original source
+ * @returns { Array } array with only the tag binding AST
+ */
+export function createNestedBindings(sourceNode, sourceFile, sourceCode) {
+  const mightBeARiotComponent = isCustomNode(sourceNode)
+
+  return mightBeARiotComponent ? [null, [
+    tagBinding(
+      cloneNodeWithoutSelectorAttribute(sourceNode),
+      null,
+      sourceFile,
+      sourceCode
+    )]
+  ] : build(createRootNode(sourceNode), sourceFile, sourceCode)
+}
+
+/**
  * Build the template and the bindings
  * @param   {RiotParser.Node} sourceNode - any kind of node parsed via riot parser
- * @param   {stiring} sourceFile - source file path
+ * @param   {string} sourceFile - source file path
  * @param   {string} sourceCode - original source
@@ -121,0 +148,0 @@ * @param   {BuildingState} state - state representing the current building tree state during the recursion

src/generators/template/constants.js

@@ -1,2 +0,2 @@
-// import {IS_BOOLEAN,IS_CUSTOM,IS_RAW,IS_SPREAD,IS_VOID} from '@riotjs/parser/src/constants'
+import {IS_BOOLEAN,IS_CUSTOM,IS_RAW,IS_SPREAD,IS_VOID} from '@riotjs/parser/src/constants'
 
@@ -7,2 +7,3 @@ export const BINDING_TYPES = 'bindingTypes'
 export const TAG_BINDING_TYPE = 'TAG'
+export const SLOT_BINDING_TYPE = 'SLOT'
 
@@ -46,14 +47,18 @@
 export const SLOT_ATTRIBUTE = 'slot'
+export const NAME_ATTRIBUTE = 'name'
 export const IS_DIRECTIVE = 'is'
 
+// Misc
+export const DEFAULT_SLOT_NAME = 'default'
 export const TEXT_NODE_EXPRESSION_PLACEHOLDER = '<!---->'
 export const BINDING_SELECTOR_PREFIX = 'expr'
+export const SLOT_TAG_NODE_NAME = 'slot'
 
 // Riot Parser constants
-// TODO: import them from the @riotjs/parser
-// reify doesn't like it https://github.com/benjamn/reify/issues/216
-export const IS_RAW_NODE = 'isRaw'
-export const IS_VOID_NODE = 'isVoid'
-export const IS_CUSTOM_NODE = 'isCustom'
-export const IS_BOOLEAN_ATTRIBUTE = 'isBoolean'
-export const IS_SPREAD_ATTRIBUTE = 'isSpread'
+export const IS_RAW_NODE = IS_RAW
+export const IS_VOID_NODE = IS_VOID
+export const IS_CUSTOM_NODE = IS_CUSTOM
+export const IS_BOOLEAN_ATTRIBUTE = IS_BOOLEAN
+export const IS_SPREAD_ATTRIBUTE = IS_SPREAD
+
+

src/generators/template/expressions/attribute.js

@@ -48,3 +48,3 @@ import {
  * @param   {RiotParser.Node.Attr} sourceNode - the custom tag
- * @param   {stiring} sourceFile - source file path
+ * @param   {string} sourceFile - source file path
  * @param   {string} sourceCode - original source
@@ -51,0 +51,0 @@ * @returns {AST.Node} object containing the expression binding keys

src/generators/template/expressions/event.js

@@ -15,3 +15,3 @@ import {
  * @param   {RiotParser.Node.Attr} sourceNode - attribute containing the event handlers
- * @param   {stiring} sourceFile - source file path
+ * @param   {string} sourceFile - source file path
  * @param   {string} sourceCode - original source
@@ -18,0 +18,0 @@ * @returns {AST.Node} object containing the expression binding keys

src/generators/template/expressions/text.js

@@ -65,3 +65,3 @@ import {
  * @param   {RiotParser.Node.Text} sourceNode - text node to parse
- * @param   {stiring} sourceFile - source file path
+ * @param   {string} sourceFile - source file path
  * @param   {string} sourceCode - original source
@@ -68,0 +68,0 @@ * @param   {number} childNodeIndex - position of the child text node in its parent children nodes

src/generators/template/index.js

@@ -7,8 +7,36 @@ import {BINDING_TYPES, EXPRESSION_TYPES, GET_COMPONENT_FN, TEMPLATE_FN} from './constants'
 
+const templateFunctionArguments = [
+  TEMPLATE_FN,
+  EXPRESSION_TYPES,
+  BINDING_TYPES,
+  GET_COMPONENT_FN
+].map(builders.identifier)
+
 /**
+ * Create the content of the template function
+ * @param   { RiotParser.Node } sourceNode - node generated by the riot compiler
+ * @param   { string } sourceFile - source file path
+ * @param   { string } sourceCode - original source
+ * @returns {AST.BlockStatement} the content of the template function
+ */
+function createTemplateFunctionContent(sourceNode, sourceFile, sourceCode) {
+  return builders.blockStatement([
+    builders.returnStatement(
+      callTemplateFunction(
+        ...build(
+          createRootNode(sourceNode),
+          sourceFile,
+          sourceCode
+        )
+      )
+    )
+  ])
+}
+
+/**
  * Extend the AST adding the new template property containing our template call to render the component
  * @param   { Object } ast - current output ast
-* @param   { stiring } sourceFile - source file path
+ * @param   { string } sourceFile - source file path
  * @param   { string } sourceCode - original source
- * @param   { Object } sourceNode - node generated by the riot compiler
+ * @param   { RiotParser.Node } sourceNode - node generated by the riot compiler
  * @returns { Object } the output ast having the "template" key
@@ -22,19 +50,4 @@ */
           null,
-          [
-            TEMPLATE_FN,
-            EXPRESSION_TYPES,
-            BINDING_TYPES,
-            GET_COMPONENT_FN
-          ].map(builders.identifier),
-          builders.blockStatement([
-            builders.returnStatement(
-              callTemplateFunction(
-                ...build(
-                  createRootNode(sourceNode),
-                  sourceFile,
-                  sourceCode
-                )
-              )
-            )
-          ])
+          templateFunctionArguments,
+          createTemplateFunctionContent(sourceNode, sourceFile, sourceCode)
         )
@@ -54,3 +67,3 @@
  * Generate the component template logic
- * @param   { Object } sourceNode - node generated by the riot compiler
+ * @param   { RiotParser.Node } sourceNode - node generated by the riot compiler
  * @param   { string } source - original component source code
@@ -57,0 +70,0 @@ * @param   { Object } meta - compilation meta information

src/generators/template/utils.js

@@ -16,2 +16,3 @@ import {
   SLOT_ATTRIBUTE,
+  SLOT_TAG_NODE_NAME,
   TEMPLATE_FN,
@@ -413,2 +414,10 @@ TEXT_NODE_EXPRESSION_PLACEHOLDER
 
+/**
+ * True the node is <slot>
+ * @param   {RiotParser.Node} node - riot parser node
+ * @returns {boolean} true if it's a slot node
+ */
+export function isSlotNode(node) {
+  return node.name === SLOT_TAG_NODE_NAME
+}
 
@@ -562,3 +571,4 @@ /**
     findIfAttribute,
-    isCustomNode
+    isCustomNode,
+    isSlotNode
   ].every(test => !test(node))
@@ -565,0 +575,0 @@ }

src/index.js

@@ -107,14 +107,7 @@ import { TAG_CSS_PROPERTY, TAG_LOGIC_PROPERTY, TAG_NAME_PROPERTY, TAG_TEMPLATE_PROPERTY } from './constants'
     tagName: template.name,
-    fragments: {
-      template,
-      css,
-      javascript
-    }
+    fragments: { template, css, javascript }
   })
 
   return compose(
-    result => ({
-      ...result,
-      meta
-    }),
+    result => ({ ...result, meta }),
     result => runPostprocessors(result, meta),
@@ -121,0 +114,0 @@ result => ({

src/utils/compose-sourcemaps.js

 import asJSON from './sourcemap-as-json'
+import {composeSourceMaps} from 'recast/lib/util'
 import isNode from './is-node'
-import recastUtil from 'recast/lib/util'
 
@@ -16,3 +16,3 @@ /**
   ) {
-    return recastUtil.composeSourceMaps(asJSON(formerMap), asJSON(latterMap))
+    return composeSourceMaps(asJSON(formerMap), asJSON(latterMap))
   } else if (isNode() && formerMap) {
@@ -19,0 +19,0 @@ return asJSON(formerMap)

src/utils/preprocess-node.js

@@ -8,7 +8,6 @@ import {execute as runPreprocessor} from '../preprocessors'
  * @param   { Object } meta - compilation meta information
- * @param   { string } source - tag source code
  * @param   { RiotParser.nodeTypes } node - css node detected by the parser
  * @returns { Output } code and sourcemap generated by the preprocessor
  */
-export default function preprocess(preprocessorType, preprocessorName, meta, source, node) {
+export default function preprocess(preprocessorType, preprocessorName, meta, node) {
   const code = node.text
@@ -15,0 +14,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1257448

increased by0.89%

Number of package files

47

increased by2.17%

Lines of code

32298

increased by0.82%

No dependency changes