types into compile

compile/index.js

@@ -0,0 +1,31 @@
+const { _jsx } = require('./jsx')
+
+/**
+ * Returns the transpiled JSX code into `h` pragma calls.
+ * @param {string} string The code to transform.
+ * @param {!_alaJsx.Config} [config] Options for the program.
+ * @param {(boolean|string)} [config.quoteProps=false] Whether to surround property names with quotes. When the `dom` string is passed, it will only quote props for invoking html components, i.e. those that start with a lowercase letter (this is required for _Closure Compiler_ when not providing externs to elements). Default `false`.
+ * @param {boolean} [config.prop2class=false] If a property name starts with a capital letter, the `className` of the _VNode_ will be updated. Default `false`.
+ * @param {!Array<string>|!Object} [config.classNames] The list of properties to put into the `className` property.
+ * @param {!Object<string, string>} [config.renameMap] How to rename classes (only applies to `prop2class` and `classNames`).
+ * @param {!Object<string, string>} [config.styles] Rename these properties into styles, e.g., `<el border-top="1px">` will become `<el style="border-top:1px">`. The keys must be property names, and the values are either booleans, or a string that should be used for renaming of the CSS property, such as `{ borderTop: 'border-top' }`. Check out [`@a-la/styles`](https://github.com/a-la/styles) that provides such a map.
+ * @param {(warning: string) => ?} [config.warn] The function to receive warnings, e.g., when destructuring of properties is used on dom elements (for Closure Compiler).
+ * @return {string}
+ */
+function jsx(string, config) {
+  return _jsx(string, config)
+}
+
+module.exports = jsx
+
+/* typal types/index.xml namespace */
+/**
+ * @typedef {_alaJsx.Config} Config Options for the program.
+ * @typedef {Object} _alaJsx.Config Options for the program.
+ * @prop {(boolean|string)} [quoteProps=false] Whether to surround property names with quotes. When the `dom` string is passed, it will only quote props for invoking html components, i.e. those that start with a lowercase letter (this is required for _Closure Compiler_ when not providing externs to elements). Default `false`.
+ * @prop {boolean} [prop2class=false] If a property name starts with a capital letter, the `className` of the _VNode_ will be updated. Default `false`.
+ * @prop {!Array<string>|!Object} [classNames] The list of properties to put into the `className` property.
+ * @prop {!Object<string, string>} [renameMap] How to rename classes (only applies to `prop2class` and `classNames`).
+ * @prop {!Object<string, string>} [styles] Rename these properties into styles, e.g., `<el border-top="1px">` will become `<el style="border-top:1px">`. The keys must be property names, and the values are either booleans, or a string that should be used for renaming of the CSS property, such as `{ borderTop: 'border-top' }`. Check out [`@a-la/styles`](https://github.com/a-la/styles) that provides such a map.
+ * @prop {(warning: string) => ?} [warn] The function to receive warnings, e.g., when destructuring of properties is used on dom elements (for Closure Compiler).
+ */

compile/template.js

@@ -0,0 +1,12 @@
+const { _jsx } = require('./jsx')
+
+/**
+ * @methodType {_alaJsx.jsx}
+ */
+function jsx(string, config) {
+  return _jsx(string, config)
+}
+
+module.exports = jsx
+
+/* typal types/index.xml namespace */

package.json

@@ -13,8 +13,9 @@
     "lint": "eslint .",
     "doc": "doc -o README.md -n _alaJsx -d -a",
     "b": "alamode src -o build -s -i jsx.js,get-args.js",
-    "d": "yarn-s d1 externs",
-    "d1": "typal src/index.js -c",
+    "d": "yarn-s template d1 externs",
+    "template": "typal compile/template.js -T compile/index.js -u -t types/api.xml,types/index.xml",
+    "d1": "typal compile/index.js -u -t types/api.xml,types/index.xml",
     "externs": "typal types/externs.js -e",
     "compile": "depack src/jsx -c -a -p -o depack/jsx.js --externs types/externs.js",
     "build": "yarn-s d b doc",

src/jsx.js → src/bin/jsx.js

@@ -6,7 +6,7 @@ if (!_input) {
   console.log('Please specify the file to transpile.')
   process.exit(1)
 }
-const code = `${readFileSync(_input)}`
+const code = readFileSync(_input, 'utf8')
 const res = jsx(code, {
   quoteProps: _preact ? 'dom' : undefined,
 })

src/index.js

@@ -3,14 +3,7 @@ import { SyncReplaceable,
   makeMarkers, makeCutRule, makePasteRule } from 'restream'
 
 /**
- * Process a JSX file.
- * @param {string} input The source code with JSX to transpile.
- * @param {!_alaJsx.Config} config Options for the program.
- * @param {(boolean|string)} [config.quoteProps=false] Whether to surround property names with quotes. When the `dom` string is passed, it will only quote props for invoking html components, i.e., those that start with a lowercase letter (E.g., for the _Google Closure Compiler_). Default `false`.
- * @param {function(...string)} [config.warn] The function to receive warnings, e.g., when destructuring of properties is used on dom elements (for Closure Compiler).
- * @param {boolean} [config.prop2class=false] If a property name starts with a capital letter, the `className` of the _VNode_ will be updated. Default `false`.
- * @param {!Array<string>|!Object} [config.classNames] The list of properties to put into the `className` property.
- * @param {!Object<string, string>} [config.renameMap] How to rename classes (only applies to `prop2class` and `classNames`).
+ * @type {_alaJsx.jsx}
  */
 const jsx = (input, config = {}) => {
   const { e, defObj, ef, i, ias, ii } = makeMarkers({
@@ -19,7 +12,7 @@ const jsx = (input, config = {}) => {
     ef: /^ *export\s+{[^}]+}\s+from\s+(['"])(?:.+?)\1/mg,
     i: /^ *import(\s+([^\s,]+)\s*,?)?(\s*{(?:[^}]+)})?\s+from\s+['"].+['"]/gm,
     ias: /^ *import\s+(?:(.+?)\s*,\s*)?\*\s+as\s+.+?\s+from\s+['"].+['"]/gm,
-    ii: /^ *import\s+['"].+['"]/gm,
+    ii: /^ *import\s+(['"]).+\1/gm,
   }, {
     getReplacement(name, index) {
       return `/*%%_RESTREAM_${name.toUpperCase()}_REPLACEMENT_${index}_%%*/`
@@ -40,17 +33,7 @@ const jsx = (input, config = {}) => {
 
 export default jsx
 
-/* documentary types/index.xml */
 /**
  * @suppress {nonStandardJsDocs}
- * @typedef {_alaJsx.Config} Config Options for the program.
- */
-/**
- * @suppress {nonStandardJsDocs}
- * @typedef {Object} _alaJsx.Config Options for the program.
- * @prop {(boolean|string)} [quoteProps=false] Whether to surround property names with quotes. When the `dom` string is passed, it will only quote props for invoking html components, i.e., those that start with a lowercase letter (E.g., for the _Google Closure Compiler_). Default `false`.
- * @prop {function(...string)} [warn] The function to receive warnings, e.g., when destructuring of properties is used on dom elements (for Closure Compiler).
- * @prop {boolean} [prop2class=false] If a property name starts with a capital letter, the `className` of the _VNode_ will be updated. Default `false`.
- * @prop {!Array<string>|!Object} [classNames] The list of properties to put into the `className` property.
- * @prop {!Object<string, string>} [renameMap] How to rename classes (only applies to `prop2class` and `classNames`).
- */
+ * @typedef {import('../compile')} _alaJsx.jsx
+ */

src/lib/components.js

@@ -3,16 +3,15 @@ import { parseSimpleContent } from './parse-content'
 import { pragma, replaceChunk, getProps } from './'
 import extract, { ExtractedJSX } from './extract'
 
-
 /* <div id={'id'}>
   Hello, {test}! {children}
   <div class={'TEST'} id={id}>test</div>
 </div> */
 
 /**
- * The entry point to transpiling a file.
+ * The entry point to transpiling a file, and recursive entry.
  * @param {string} input The string to transpile.
- * @param {_alaJsx.Config} config Transpilation config.
+ * @param {_alaJsx.Config} config The transpilation config.
  * @returns {string} The transpiled source code with `h` pragma for hyperscript invocations.
  */
 const transpileJSX = (input, config = {}) => {
@@ -47,7 +46,7 @@ export default transpileJSX
 //   f = newPragma(tagName, ...children) // `e(tag, child, child2)`
 // }
 
-// parse the content bro parse it
+// parse the content bro parse it 🥦
 /**
  * This function will return an array with content of a jsx tag, and the content can be a function to create an element (pragma), a string, or an expression.
  * @param {string} content
@@ -95,5 +94,5 @@ export const parseContent = (content, quoteProps = false, warn = null,
 
 /**
  * @suppress {nonStandardJsDocs}
- * @typedef {import('..').Config} _alaJsx.Config
+ * @typedef {import('../../compile').Config} _alaJsx.Config
  */

types/api.xml

@@ -1,7 +1,7 @@
 <types ns="_alaJsx">
   <method name="jsx" return="string">
     <arg string name="string">The code to transform.</arg>
-    <arg type="_alaJsx.Config" name="config">Configuration object.</arg>
+    <arg opt type="!_alaJsx.Config" name="config">Configuration object.</arg>
     Returns the transpiled JSX code into `h` pragma calls.
   </method>
 </types>

types/externs.js

@@ -1,8 +1,20 @@
+/**
+ * @fileoverview
+ * @externs
+ */
+
 /* typal types/index.xml */
 /** @const */
 var _alaJsx = {}
 /**
  * Options for the program.
- * @typedef {{ quoteProps: (((boolean|string))|undefined), warn: ((function(...string))|undefined), prop2class: (boolean|undefined), classNames: ((!Array<string>|!Object)|undefined), renameMap: ((!Object<string, string>)|undefined) }}
+ * @typedef {{ quoteProps: (((boolean|string))|undefined), prop2class: (boolean|undefined), classNames: ((!Array<string>|!Object)|undefined), renameMap: ((!Object<string, string>)|undefined), styles: ((!Object<string, string>)|undefined), warn: ((function(string))|undefined) }}
  */
 _alaJsx.Config
+
+/* typal types/api.xml */
+/**
+ * Returns the transpiled JSX code into `h` pragma calls.
+ * @typedef {function(string,!_alaJsx.Config=): string}
+ */
+_alaJsx.jsx

types/index.xml

@@ -1,11 +1,12 @@
 <types namespace="_alaJsx">
   <type name="Config" desc="Options for the program.">
     <prop type="(boolean|string)" name="quoteProps" default="false">
-      Whether to surround property names with quotes. When the `dom` string is passed, it will only quote props for invoking html components, i.e., those that start with a lowercase letter (E.g., for the _Google Closure Compiler_).
+      Whether to surround property names with quotes. When the `dom` string is passed, it will only quote props for invoking html components, i.e. those that start with a lowercase letter (this is required for _Closure Compiler_ when not providing externs to elements).
     </prop>
-    <prop opt type="function(...string)" name="warn">
+    <fn opt name="warn">
+      <arg string name="warning">The warning.</arg>
       The function to receive warnings, e.g., when destructuring of properties is used on dom elements (for Closure Compiler).
-    </prop>
+    </fn>
     <prop boolean name="prop2class" default="false">
       If a property name starts with a capital letter, the `className` of the _VNode_ will be updated.
     </prop>
@@ -15,5 +16,8 @@
     <prop opt type="!Object<string, string>" name="renameMap">
       How to rename classes (only applies to `prop2class` and `classNames`).
     </prop>
+    <prop opt type="!Object<string, string>" name="styles">
+      Rename these properties into styles, e.g., `<el border-top="1px">` will become `<el style="border-top:1px">`. The keys must be property names, and the values are either booleans, or a string that should be used for renaming of the CSS property, such as `{ borderTop: 'border-top' }`. Check out [`@a-la/styles`](https://github.com/a-la/styles) that provides such a map.
+    </prop>
   </type>
 </types>