Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/a-la/jsx
The RegExp-Based JSX Transform For ÀLaMode And Other Software.
https://github.com/a-la/jsx
jsx
Last synced: 2 days ago
JSON representation
The RegExp-Based JSX Transform For ÀLaMode And Other Software.
- Host: GitHub
- URL: https://github.com/a-la/jsx
- Owner: a-la
- License: mit
- Created: 2018-12-08T13:32:59.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2020-03-18T09:36:39.000Z (almost 5 years ago)
- Last Synced: 2024-12-17T02:58:18.510Z (21 days ago)
- Topics: jsx
- Language: JavaScript
- Homepage: https://alamode.cc
- Size: 300 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# @a-la/jsx
[](https://www.npmjs.com/package/@a-la/jsx)
[](https://ci.appveyor.com/project/4r7d3c0/jsx)
`@a-la/jsx` is The JSX transform For _ÀLamode_ And Other Packages.
```sh
yarn add @a-la/jsx
npm i @a-la/jsx
```
## Table Of Contents
- [Table Of Contents](#table-of-contents)
- [API](#api)
- [`jsx(string: string, config=: !Config): string`](#jsxstring-stringconfig-config-string)
* [`Config`](#type-config)
- [The Transform](#the-transform)
- [Classes](#classes)
- [The Dynamic Method](#the-dynamic-method)
- [Limitations](#limitations)
- [Copyright](#copyright)
## API
The package is available by importing its default function:
```js
import jsx from '@a-la/jsx'
```
## jsx(
`string: string,`
`config=: !Config,`
): string
Returns the transpiled JSX code into `h` pragma calls.
- string* `string`: The code to transform.
- config !Config (optional): Configuration object.
__`Config`__: Options for the program.
| Name | Type | Description | Default |
| ---------- | ------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| quoteProps | (boolean \| string) | 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). | `false` |
| prop2class | boolean | If a property name starts with a capital letter, the `className` of the _VNode_ will be updated. | `false` |
| classNames | (!Array<string> \| !Object) | The list of properties to put into the `className` property. | - |
| renameMap | !Object<string, string> | How to rename classes (only applies to `prop2class` and `classNames`). | - |
| styles | !Object<string, string> | Rename these properties into styles, e.g., `` 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. | - |
| warn | (warning: string) => ? | The function to receive warnings, e.g., when destructuring of properties is used on dom elements (for Closure Compiler). | - |
```js
import { readFileSync } from 'fs'
import jsx from '@a-la/jsx'
const code = readFileSync('example/Component.jsx', 'utf8')
const res = jsx(code)
console.log(res)
```
*Given the component's source code:*
```jsx
import RichTextArea from 'richtext'
const Title = Example
export const Component = ({
align = 'right', tabs, img,
}) => {
const props = {
class: 'example',
id: 'id',
}
return
{
e.preventDefault()
alert('Hello World')
return false
}} role="aria-button">
{tabs.map((tab, i) => {tab})}
Hello World!
{img && 
}
}
```
*The following result is achieved:*
```js
import RichTextArea from 'richtext'
const Title = h('title',{},`Example`)
export const Component = ({
align = 'right', tabs, img,
}) => {
const props = {
class: 'example',
id: 'id',
}
return h('div',{onClick:(e) => {
e.preventDefault()
alert('Hello World')
return false
}, role:"aria-button"},
h(Title),
h(RichTextArea,{dynamic:true}),
tabs.map((tab, i) => h('span',{key:i},tab)),
h('p',{...props,align:align},
`Hello World!`
,img && h('img',{src:img}),
),
)
}
```
## The Transform
The transform is the Reg-Exp alternative to Babel's implementation of the JSX transform. We're not aware of any other alternatives, however this approach provides a light-weight solution for transforming `JSX` syntax for front-end and back-end rendering and static website generation. The lit-html is based on template strings, and does not provide html highlighting which is enabled in `.jsx` files. This makes JSX the standard of modern HTML templating. The service using the JSX does not have to be a react page, so that the transform can be used to server-side rendering which will always require serving HTML using a template. To achieve this in Node.js, the ÀLaMode transpiler can be used, whereas this package just exports a single function to perform the translation of the code.
The `import` and `export` statements will be temporally commented out when transpiling, otherwise V8 will throw an error when trying to detect where JSX syntax starts (see the method).
## Classes
It's possible to make the transpiler extract property names and add them into the `className` property. If such property already exists, it will be updated. If it doesn't, it will be created. Moreover, when `prop2class` property is set, any property that starts with a capital letter will also be added to the class list. Finally, if you pass a rename map, the classes will be updated according to it.
_The component to transpile:_
```jsx
export default function Classes() {
return (
)
}
```
_The setup:_
```js
import { readFileSync } from 'fs'
import jsx from '../src'
const code = readFileSync('example/classes.jsx', 'utf8')
const res = jsx(code, {
prop2class: true,
classNames: ['hello', 'world'],
renameMap: {
hello: 'hi',
},
})
console.log(res)
```
_The output:_
```js
export default function Classes() {
return (h('div',{ className:'Example hi world' }))
}
```
## The Dynamic Method
This package will try to create a new Script (an import from the `vm` module) to find out where JSX syntax failed (first `<`). The location of the opening tag is therefore found out and the name of the tag extracted. With the name of the tag, the closing tag name can be found, and the contents inside parsed.
```html
/Users/zavr/a-la/jsx/test/fixture/Component.jsx:2
^
SyntaxError: Unexpected token <
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Module._compile (module.js:617:28)
at Object.Module._extensions..js (module.js:664:10)
at Module.load (module.js:566:32)
at tryModuleLoad (module.js:506:12)
at Function.Module._load (module.js:498:3)
at Function.Module.runMain (module.js:694:10)
at startup (bootstrap_node.js:204:16)
at bootstrap_node.js:625:3
```
## Limitations
- [ ] Cannot use `<>` in functions, and `{}` in comments e.g.,
```js
const C = ({ items }) =>
{items.map((i, j) => {
// stop when { 10 }:
if (j > 10) return
return {i}
})}
```
- [ ] Cannot define components in `export default { }`, or use anything with `}`, e.g.,
```js
export default {
'my-component'() {
return Hello World
},
nested: { val: true },
}
```
## Copyright
© Art Deco™ for À La Mode 2020
