react-pure-html-component-loader
A Webpack loader allowing imports of HTML components as if they were React pure functional components.
Usage
./click-me-view.jsx.html
Clicked {{ props.clicks }} time(s)
./click-me-container.jsx
; // Import the HTML component as if it was a React component.; { superprops; thisstate = clicks: 0 ; thisbuttonProps = onMouseDown: thishandleMouseDown ; } { e; this; } { return <ClickMeView buttonProps= thisbuttonProps clicks= thisstateclicks /> ; }
Add the react-pure-html-component-loader to your webpack.config.js:
module: loaders: test: /\.jsx\.html$/ exclude: /node_modules/ loader: 'babel!react-pure-html-component' resolve: extensions: '.jsx' '.jsx.html'
Supported Features
- Default and named imports/exports,
- Multiple component definitions in the same file,
- Explicit conditional and loop rendering,
- Props spreading,
- CSS modules.
Installation
npm install --save-dev react-pure-html-component-loader
Background
React provides a great developing experience, you finally have a strong integration between the JavaScript code and the template syntax, it feels natural to write.
But this merge isn't that good for designers who just know enough HTML and, depending on the requirements, it can be a disqualifying criteria for React.
Thanks to the pure functional components and the Presentational and Container pattern, most components are simply templates having data as input and some UI as output. What if those pure functional components could simply be written in HTML to be easily created and modified by designers?
The purpose of this Webpack loader is to convert HTML components to React pure functional component.
react-pure-html-component-loader reconcile developers and designers. It is a Webpack loader compiling HTML components into pure functional React components.
Demo
Some demos can be found under the demo/
folder, to launch one type in a
console:
npm run demo -- <demo-path>
For example:
npm run demo -- demo/todo-list
API
Imports
Component import
Default import
Import the default component of a file.
Usage
Attributes
rel
: Must be set toimport
for this kind of relation,href
: Path of the file to import,id
: Name to use to reference the default component of the file.
Example
Is equivalent in ES2015 to:
;
Named imports
Import a component by its name. The <link>
tag for a named import must be
child of another <link>
tag having a href
attribute.
Usage
Attributes
rel
: Must be set toimport
for this kind of relation,href
: Path of the file to import,name
(Optional): Name of the component to import, can be omitted if it is the same asid
,id
: Name to use to reference the component.
Example
Is equivalent in ES2015 to:
;
Default and named imports
Import the default and some named components from the same file.
Usage
Attributes
- See default imports and named imports.
Example
Is equivalent in ES2015 to:
;
Stylesheet import (CSS Modules)
Global stylesheet
Import a global stylesheet.
Usage
Attributes
rel
: Must be set tostylesheet
for this kind of relation,href
: Path of the file to import.
Example
Is equivalent in ES2015 to:
;
Named stylesheet
Import a stylesheet and name it.
Usage
Attributes
rel
: Must be set tostylesheet
for this kind of relation,href
: Path of the file to import,id
: Value to use to reference the stylesheet.
Example
Is equivalent in ES2015 to:
;
It can be used this way:
Components
A component is the content of an HTML tag <template>
. It can only have a
single child.
Default component
Each file must contain at most one default component. A default component is the main component of the file.
Usage
<!-- Content -->
Attributes
default
: Flag the component as default,id
(Optional): Tag name to use to reference this component. Also used to set thedisplayName
of the component for debug purpose.
Example
Hello World
Is equivalent in React to:
{ return <div>Hello World</div> ;}HelloWorlddisplayName = 'HelloWorld';
Named components
A named component is simply a <template>
tag with an id
attribute, which
means it can be used by referencing its name. All named components will be
exported under their given name.
Usage
<!-- Content -->
Attributes
id
: Tag name to use to reference this component. Also used to set thedisplayName
of the component for debug purpose.
Example
<!-- ... --> <!-- ... --> <!-- ... -->
Is equivalent in React to:
{ return // ... ;}NamedComponentdisplayName = 'NamedComponent'; { return // ... <NamedComponent /> // ... ;}
Loops
A loop will render its content for each element in the array. The render
tag
can only have one child. When looping over an array, a key
attribute must be
set on each child tag.
Usage
<!-- Content -->
Attributes
for-each
: Array of data,as
: Name of the variable to use for each element.
Example
{{ user.name }}
Is equivalent in React to:
{ return <div className="users"> propsusers </div> ;}
Conditionals
A conditional will render its content depending on a condition. The render
tag
can only have one child.
Usage
<!-- Content -->
Attributes
if
: Condition to fulfill for the content to be rendered.
Example
{{ props.user.name }}
Is equivalent in React to:
{ return <div className="user"> propsuser && <div> propsusername </div> </div> ;}
Props spreading
Props spreading is used to simplify the component so the focus can be kept on the UI.
Usage
<!-- Content -->
Attributes
use-props
: Variable that will be spread in the corresponding tag.
Example
Instead of writing:
Clicked {{ props.clicks }} time(s)
Just write:
Clicked {{ props.clicks }} time(s)
Which is equivalent in React to:
{ return <button ...propsbuttonProps > Clicked propsclicks </button> ;}
The conversion from HTML attributes to JSX can be found in this mapping file.
License
MIT.