WAE Component Library
This is a poc to:
- Using Component Library
- Render static markup per-component
Using Component Library
have a component library for all web UI components.
-
Install
yarn install wae-components@1.0.0or from the repos urlyarn install https://github.com/Lululemon/wae-components -
Use it in your project!
// import it
import Page from 'wae-components/components/Page';
import Header from 'wae-components/components/Header';
// use it
const HomePage = () => (
<Page>
<Header
title="my title"
/>
</Page>
);Render static markup per-component
This renders static markup *per-*component
- Genrate Static HTML Markup:
yarn export
this runs
"export": "node generate-static-markup.js"
and outputs html fragments based off of the partials to the markup directory.
Example.*
Input src/component/Header.js:
import React from "react";
export default class Header extends React.Component {
render(){
return <div>Hello Header</div>;
}
}Output markup/Header.html:
<div>Hello Header</div>This can be use in many ways like some of the following.
Use case 1:
import React from "react";
import ReactDOM from "react-dom";
// these props will be the default props used with ssr and the static markup
const headerProps = {
title: "my title"
}
ReactDOM.render(<Page />, document.getElementById("page"));
ReactDOM.render(<Header {...headerProps}/>, document.getElementById("header"));index.html should have:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Example App</title>
</head>
<body>
<section id="header"></section>
<section id="page"></section>
</body>
</html>
Use case 2:
const renderTemplate = ({
title,
Partials
}) => `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>${title}</title>
</head>
<body>
${Partials.Header}
${Partials.Page}
</body>
</html>
)`
import renderTemplate from './renderTemplate'
app.use('*', (req,res)=>{
const myTemplate = renderTemplate({
title: "my title",
Partials
})
res.send(myTemplate)
})