@a-la/jsx - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

build/index.js

@@ -8,4 +8,6 @@ const transpileJSX = require('./lib/components');
  * @param {string} input The source code with JSX to transpile.
+ * @param {Config} config Options for the program.
+ * @param {boolean} [config.quoteProps=false] Whether to surround property names with quotes, e.g., for the Google Closure Compiler. Default `false`.
  */
-const jsx = (input) => {
+const jsx = (input, config = {}) => {
   const { e, i, ias } = makeMarkers({
@@ -25,3 +27,3 @@ e: /^ *export\s+(?:default\s+)?/mg,
     makeCutRule(i), makeCutRule(ias)])
-  const tt = transpileJSX(s)
+  const tt = transpileJSX(s, config)
   const as = SyncReplaceable(tt, [makePasteRule(e),
@@ -37,4 +39,3 @@ makePasteRule(i), makePasteRule(ias)])
  * @typedef {Object} Config Options for the program.
- * @prop {boolean} [shouldRun=true] A boolean option. Default `true`.
- * @prop {string} text A text to return.
+ * @prop {boolean} [quoteProps=false] Whether to surround property names with quotes, e.g., for the Google Closure Compiler. Default `false`.
  */

build/lib/components.js

@@ -14,6 +14,8 @@ const { pragma, replaceChunk } = require('.');
 /**
+ * The entry point to transpiling a file.
  * @param {string} input The string to transpile.
  * @returns {string} The transpiled source code with `h` pragma for hyperscript invocations.
  */
-const transpileJSX = (input) => {
+const transpileJSX = (input, config = {}) => {
+  const { quoteProps } = config
   const position = detectJSX(input)
@@ -24,5 +26,5 @@ if (position === null) return input
   const { props = '', content, tagName, string: { length } } = extract(s)
-  const children = parseContent(content)
+  const children = parseContent(content, quoteProps)
   const { obj, destructuring } = getProps(props)
-  const f = pragma(tagName, obj, children, destructuring)
+  const f = pragma(tagName, obj, children, destructuring, quoteProps)
   const res = replaceChunk(input, position, length, f)
@@ -49,25 +51,25 @@ // find another one one
  * @param {string} content
+ * @param {boolean} [quoteProps=false] Whether to quote properties.
  */
-       const parseContent = (content) => {
+       const parseContent = (content, quoteProps = false) => {
   if (!content) return []
-  const C = content.split('\n')
-    // .filter(a => !/^\s*$/.test(a))
-    .join('\n')
-  const bl = C.indexOf('<')
+  // const C = content
+  // .split('\n').filter(a => !/^\s*$/.test(a)).join('\n')
+  const bl = content.indexOf('<')
   if (bl == -1) {
-    const c = parseSimpleContent(C)
+    const c = parseSimpleContent(content)
     return c
   }
 
-  const b = C.slice(0, bl)
+  const b = content.slice(0, bl)
   const before = b ? parseSimpleContent(b) : []
 
-  const trim = C.slice(bl)
+  const trim = content.slice(bl)
   const { string: { length }, props = '', content: jsx, tagName } = extract(trim)
   const { obj, destructuring } = getProps(props)
-  const children = parseContent(jsx)
-  const p = pragma(tagName, obj, children, destructuring)
+  const children = parseContent(jsx, quoteProps)
+  const p = pragma(tagName, obj, children, destructuring, quoteProps)
 
-  const a = C.slice(bl + length)
-  const after = a ? parseContent(a) : []
+  const a = content.slice(bl + length)
+  const after = a ? parseContent(a, quoteProps) : []
 
@@ -74,0 +76,0 @@ return [

build/lib/extract.js

@@ -30,3 +30,3 @@ const { SyncReplaceable, makeMarkers, makeCutRule } = require('restream');
         }
-        if (isSelfClosing) {
+        if (isSelfClosing && !stack) {
           contentEnd = contentStart
@@ -38,3 +38,3 @@ end = i + m.length
           throw new Error('The tag closed before opening.')
-        stack += closing ? -1 : 1
+        if (!isSelfClosing) stack += closing ? -1 : 1
         if (stack == 0) {
@@ -41,0 +41,0 @@ contentEnd = i

build/lib/index.js

 let mismatch = require('mismatch'); if (mismatch && mismatch.__esModule) mismatch = mismatch.default;
 const { SyncReplaceable } = require('restream');
 
-const UNDEFINED = Symbol()
-
 /**
@@ -111,3 +109,3 @@ * Returns the name of the opening tag from the string starting with <, or `undefined`.
 
-const makeObjectBody = (pp, destructuring = []) => {
+const makeObjectBody = (pp, destructuring = [], quoteProps = false) => {
   const { length } = Object.keys(pp)
@@ -117,3 +115,4 @@ if (!length && !destructuring.length) return '{}'
     const v = pp[k]
-    return [...a, `${k}:${v}`]
+    const kk = quoteProps ? `'${k}'` : k
+    return [...a, `${kk}:${v}`]
   }, destructuring).join(',')}}`
@@ -134,2 +133,4 @@ return pr
  * @param {string[]} children The array with the child nodes which are strings, but encode either a reference, a string or an invocation the the `e` function again. Thus the jsx is parsed recursively depth-first.
+ * @param {string[]} [destructuring] Any properties for destructuring.
+ * @param {boolean} [quoteProps=false] Whether to quote the properties' keys (for Closure compiler).
  * @example
@@ -141,3 +142,3 @@ *
  */
-       const pragma = (tagName, props = {}, children = [], destructuring = []) => {
+       const pragma = (tagName, props = {}, children = [], destructuring = [], quoteProps = false) => {
   const tn = isComponentName(tagName) ? tagName : `'${tagName}'`
@@ -155,3 +156,3 @@ // if (typeof children == 'string') {
   }
-  const pr = makeObjectBody(props, destructuring)
+  const pr = makeObjectBody(props, destructuring, quoteProps)
   const c = children.join(',')
@@ -158,0 +159,0 @@ const res = `h(${tn},${pr}${c ? `,${c}` : ''})`

CHANGELOG.md

@@ -0,1 +1,8 @@
+## 11 December 2018
+
+### 1.1.0
+
+- [feature] `quoteProps` to enable better _Google Closure_ compilation.
+- [fix] Correctly parse code with self-closing tag inside elements with the same name.
+
 ## 10 December 2018
@@ -2,0 +9,0 @@

package.json

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

README.md

@@ -15,3 +15,4 @@ # @a-la/jsx
 - [API](#api)
-- [`jsx(string: string): string`](#jsxstring-string-string)
+- [`jsx(string: string, config: Config): string`](#jsxstring-stringconfig-config-string)
+  * [`Config`](#type-config)
 - [The Transform](#the-transform)
@@ -33,6 +34,12 @@ - [The Dynamic Method](#the-dynamic-method)
 
-## `jsx(`<br/>&nbsp;&nbsp;`string: string,`<br/>`): string`
+## `jsx(`<br/>&nbsp;&nbsp;`string: string,`<br/>&nbsp;&nbsp;`config: Config,`<br/>`): string`
 
 Returns the transpiled JSX code into `h` pragma calls.
 
+__<a name="type-config">`Config`</a>__: Options for the program.
+
+|    Name    |   Type    |                                      Description                                       | Default |
+| ---------- | --------- | -------------------------------------------------------------------------------------- | ------- |
+| quoteProps | _boolean_ | Whether to surround property names with quotes, e.g., for the Google Closure Compiler. | `false` |
+
 ```js
@@ -39,0 +46,0 @@ /* yarn example/ */

No alert changes

Improved metrics

Total package byte prevSize

21955

increased by7.39%

Lines of code

386

increased by1.31%

Number of lines in readme file

140

increased by5.26%

No dependency changes