@a-la/jsx - npm Package Compare versions

Comparing version 1.1.4 to 1.2.0

build/lib/components.js

@@ -0,5 +1,6 @@
+let detectJSX = require('@a-la/detect-jsx'); if (detectJSX && detectJSX.__esModule) detectJSX = detectJSX.default;
+const { SyncReplaceable } = require('restream');
+const { parseSimpleContent } = require('./parse-content');
 const { pragma, replaceChunk, getProps } = require('./');
-const { parseSimpleContent } = require('./parse-content');
-let detectJSX = require('@a-la/detect-jsx'); if (detectJSX && detectJSX.__esModule) detectJSX = detectJSX.default;
-const extract = require('./extract');
+const extract = require('./extract'); const { ExtractedJSX } = extract;
 
@@ -54,27 +55,27 @@
   // .split('\n').filter(a => !/^\s*$/.test(a)).join('\n')
-  const bl = content.indexOf('<')
-  if (bl == -1) {
-    const c = parseSimpleContent(content)
-    return c
-  }
-
-  const b = content.slice(0, bl)
-  const before = b ? parseSimpleContent(b) : []
-
-  const trim = content.slice(bl)
-  const { string: { length }, props = '', content: jsx, tagName } = extract(trim)
-  const { obj, destructuring } = getProps(props)
-  const children = parseContent(jsx, quoteProps)
-  const p = pragma(tagName, obj, children, destructuring, quoteProps)
-
-  const a = content.slice(bl + length)
-  const after = a ? parseContent(a, quoteProps) : []
-
-  return [
-    ...before,
-    p,
-    ...after,
-  ]
+  const contents = parseSimpleContent(content) // split by expressions
+  const jsx = contents.reduce((acc, string) => {
+    if (string instanceof ExtractedJSX) {
+      const { props = '', content: part, tagName } = string
+      const { obj, destructuring } = getProps(props)
+      const children = parseContent(part, quoteProps)
+      const p = pragma(tagName, obj, children, destructuring, quoteProps)
+      return [...acc, p]
+    }
+    const j = detectJSX(string)
+    if (j) {
+      const s = string.slice(j)
+      const { string: { length }, props = '', content: part, tagName } = extract(s)
+      const { obj, destructuring } = getProps(props)
+      const children = parseContent(part, quoteProps)
+      const p = pragma(tagName, obj, children, destructuring, quoteProps)
+      const strBefore = string.slice(0, j)
+      const strAfter = string.slice(j + length)
+      return [...acc, `${strBefore}${p}${strAfter}`]
+    }
+    return [...acc, string]
+  }, [])
+  return jsx
 }
 
 module.exports.parseContent = parseContent

build/lib/extract.js

@@ -58,6 +58,13 @@ const { SyncReplaceable, makeMarkers, makeCutRule } = require('restream');
   const c = content.replace(arrow.regExp, '=>')
-  return { string: s, props: pp, content: c, tagName }
+  return new ExtractedJSX({ string: s, props: pp, content: c, tagName })
 }
 
+       class ExtractedJSX {
+  constructor(properties) {
+    Object.assign(this, properties)
+  }
+}
 
-module.exports=extract
+module.exports=extract
+
+module.exports.ExtractedJSX = ExtractedJSX

build/lib/parse-content.js

@@ -0,1 +1,5 @@
+const { SyncReplaceable, makeMarkers, makeCutRule } = require('restream');
+const { getTagName } = require('.');;
+const extract = require('./extract');;
+
 /**
@@ -19,6 +23,34 @@ * Make a quoted string to interpret by JS.
   // let prev = 0
-  string.replace(/{\s*(.*?)\s*}/g, ({ length }, expression, i) => {
-    const a = { from: i, to: i + length, expression }
-    temps.push(a)
-  })
+  let current = {}
+  let expressionStack = 0
+  let jsxStack = 0
+  SyncReplaceable(string, [{
+    re: /[<{}]/g,
+    replacement(m, i) {
+      if (i < jsxStack) return // blocked by jsx
+      const isExpression = /[{}]/.test(m)
+      let opening
+      if (isExpression) {
+        opening = m == '{'
+        expressionStack += opening ? 1 : -1
+        if (expressionStack == 1 && !current.from) current.from = i
+        else if (expressionStack == 0) {
+          current.to = i + 1
+          current.expression = string.slice(current.from + 1, i)
+          temps.push(current)
+          current = {}
+        }
+      } else {
+        if (expressionStack) return m
+        const extractedJsx = extract(string.slice(i))
+        jsxStack = i + extractedJsx.string.length
+        current.extractedJsx = extractedJsx
+        current.to = jsxStack
+        current.from = i
+        temps.push(current)
+        current = {}
+      }
+    },
+  }, {
+  }])
   const res = temps.length ? getTemps(string, temps) : [getQuoted(string)]
@@ -37,7 +69,8 @@ return res
   let lastTo = 0
-  const ar = temps.reduce((acc, { from, to, expression }) => {
+  const ar = temps.reduce((acc, { from, to, expression, extractedJsx }) => {
     const b = string.slice(lastTo, from)
     if (b) acc.push(getQuoted(b))
     lastTo = to
-    acc.push(expression)
+    if (expression) acc.push(expression)
+    else if (extractedJsx) acc.push(extractedJsx)
     return acc
@@ -44,0 +77,0 @@ }, [])

CHANGELOG.md

@@ -0,1 +1,7 @@
+## 22 January 2019
+
+### 1.2.0
+
+- [feature] Implement iterators in JSX.
+
 ## 15 January 2019
@@ -2,0 +8,0 @@

package.json

 {
   "name": "@a-la/jsx",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "description": "The JSX Transform For ÀLaMode And Other Packages.",
@@ -5,0 +5,0 @@ "main": "build",

README.md

@@ -61,3 +61,3 @@ # @a-la/jsx
 
-export const Component = ({ align = 'right' }) => {
+export const Component = ({ align = 'right', tabs }) => {
   const props = {
@@ -74,2 +74,3 @@ class: 'example',
     <RichTextArea />
+    {tabs.map((tab, i) => <span key={i}>{tab}</span>)}
     <p {...props} align={align}>
@@ -88,3 +89,3 @@ Hello World!
 
-export const Component = ({ align = 'right' }) => {
+export const Component = ({ align = 'right', tabs }) => {
   const props = {
@@ -101,2 +102,3 @@ class: 'example',
     `,h(RichTextArea),`
+    `,tabs.map((tab, i) => h('span',{key:i},tab)),`
     `,h('p',{...props,align:align},`
@@ -103,0 +105,0 @@ Hello World!

src/lib/components.js

@@ -0,5 +1,6 @@
+import detectJSX from '@a-la/detect-jsx'
+import { SyncReplaceable } from 'restream'
+import { parseSimpleContent } from './parse-content'
 import { pragma, replaceChunk, getProps } from './'
-import { parseSimpleContent } from './parse-content'
-import detectJSX from '@a-la/detect-jsx'
-import extract from './extract'
+import extract, { ExtractedJSX } from './extract'
 
@@ -54,25 +55,25 @@
   // .split('\n').filter(a => !/^\s*$/.test(a)).join('\n')
-  const bl = content.indexOf('<')
-  if (bl == -1) {
-    const c = parseSimpleContent(content)
-    return c
-  }
-
-  const b = content.slice(0, bl)
-  const before = b ? parseSimpleContent(b) : []
-
-  const trim = content.slice(bl)
-  const { string: { length }, props = '', content: jsx, tagName } = extract(trim)
-  const { obj, destructuring } = getProps(props)
-  const children = parseContent(jsx, quoteProps)
-  const p = pragma(tagName, obj, children, destructuring, quoteProps)
-
-  const a = content.slice(bl + length)
-  const after = a ? parseContent(a, quoteProps) : []
-
-  return [
-    ...before,
-    p,
-    ...after,
-  ]
+  const contents = parseSimpleContent(content) // split by expressions
+  const jsx = contents.reduce((acc, string) => {
+    if (string instanceof ExtractedJSX) {
+      const { props = '', content: part, tagName } = string
+      const { obj, destructuring } = getProps(props)
+      const children = parseContent(part, quoteProps)
+      const p = pragma(tagName, obj, children, destructuring, quoteProps)
+      return [...acc, p]
+    }
+    const j = detectJSX(string)
+    if (j) {
+      const s = string.slice(j)
+      const { string: { length }, props = '', content: part, tagName } = extract(s)
+      const { obj, destructuring } = getProps(props)
+      const children = parseContent(part, quoteProps)
+      const p = pragma(tagName, obj, children, destructuring, quoteProps)
+      const strBefore = string.slice(0, j)
+      const strAfter = string.slice(j + length)
+      return [...acc, `${strBefore}${p}${strAfter}`]
+    }
+    return [...acc, string]
+  }, [])
+  return jsx
 }

src/lib/extract.js

@@ -58,6 +58,11 @@ import { SyncReplaceable, makeMarkers, makeCutRule } from 'restream'
   const c = content.replace(arrow.regExp, '=>')
-  return { string: s, props: pp, content: c, tagName }
+  return new ExtractedJSX({ string: s, props: pp, content: c, tagName })
 }
 
+export class ExtractedJSX {
+  constructor(properties) {
+    Object.assign(this, properties)
+  }
+}
 
 export default extract

src/lib/parse-content.js

@@ -0,1 +1,5 @@
+import { SyncReplaceable, makeMarkers, makeCutRule } from 'restream'
+import { getTagName } from '.';
+import extract from './extract';
+
 /**
@@ -19,6 +23,34 @@ * Make a quoted string to interpret by JS.
   // let prev = 0
-  string.replace(/{\s*(.*?)\s*}/g, ({ length }, expression, i) => {
-    const a = { from: i, to: i + length, expression }
-    temps.push(a)
-  })
+  let current = {}
+  let expressionStack = 0
+  let jsxStack = 0
+  SyncReplaceable(string, [{
+    re: /[<{}]/g,
+    replacement(m, i) {
+      if (i < jsxStack) return // blocked by jsx
+      const isExpression = /[{}]/.test(m)
+      let opening
+      if (isExpression) {
+        opening = m == '{'
+        expressionStack += opening ? 1 : -1
+        if (expressionStack == 1 && !current.from) current.from = i
+        else if (expressionStack == 0) {
+          current.to = i + 1
+          current.expression = string.slice(current.from + 1, i)
+          temps.push(current)
+          current = {}
+        }
+      } else {
+        if (expressionStack) return m
+        const extractedJsx = extract(string.slice(i))
+        jsxStack = i + extractedJsx.string.length
+        current.extractedJsx = extractedJsx
+        current.to = jsxStack
+        current.from = i
+        temps.push(current)
+        current = {}
+      }
+    },
+  }, {
+  }])
   const res = temps.length ? getTemps(string, temps) : [getQuoted(string)]
@@ -37,7 +69,8 @@ return res
   let lastTo = 0
-  const ar = temps.reduce((acc, { from, to, expression }) => {
+  const ar = temps.reduce((acc, { from, to, expression, extractedJsx }) => {
     const b = string.slice(lastTo, from)
     if (b) acc.push(getQuoted(b))
     lastTo = to
-    acc.push(expression)
+    if (expression) acc.push(expression)
+    else if (extractedJsx) acc.push(extractedJsx)
     return acc
@@ -44,0 +77,0 @@ }, [])

No alert changes

Improved metrics

Total package byte prevSize

39717

increased by9.23%

Lines of code

853

increased by11.07%

Number of lines in readme file

148

increased by1.37%

No dependency changes