Skip to content

Commit

Permalink
change name, prepare for release
Browse files Browse the repository at this point in the history
  • Loading branch information
jescalan committed May 16, 2017
1 parent 86d4fc1 commit 22094cd
Show file tree
Hide file tree
Showing 5 changed files with 33 additions and 30 deletions.
5 changes: 4 additions & 1 deletion .npmignore
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,7 @@ coverage
.nyc_output
yarn.lock
.travis.yml
rollup.config.js
rollup.browser.js
rollup.ast-vdom.js
src
!lib
2 changes: 1 addition & 1 deletion LICENSE.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
License (MIT)
-------------

Copyright © 2017 reshape
Copyright © 2017 Jeff Escalante

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

Expand Down
42 changes: 21 additions & 21 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
# Reshape Preact SSR
# Reshape Preact Components

[![npm](https://img.shields.io/npm/v/reshape-preact-ssr.svg?style=flat-square)](https://npmjs.com/package/reshape-preact-ssr)
[![tests](https://img.shields.io/travis/reshape/preact-ssr.svg?style=flat-square)](https://travis-ci.org/reshape/preact-ssr?branch=master)
[![dependencies](https://img.shields.io/david/reshape/preact-ssr.svg?style=flat-square)](https://david-dm.org/reshape/preact-ssr)
[![coverage](https://img.shields.io/codecov/c/github/reshape/preact-ssr.svg?style=flat-square)](https://codecov.io/gh/reshape/preact-ssr)
[![npm](https://img.shields.io/npm/v/reshape-preact-components.svg?style=flat-square)](https://npmjs.com/package/reshape-preact-components)
[![tests](https://img.shields.io/travis/reshape/preact-components.svg?style=flat-square)](https://travis-ci.org/reshape/preact-components?branch=master)
[![dependencies](https://img.shields.io/david/reshape/preact-components.svg?style=flat-square)](https://david-dm.org/reshape/preact-components)
[![coverage](https://img.shields.io/codecov/c/github/reshape/preact-components.svg?style=flat-square)](https://codecov.io/gh/reshape/preact-components)

Render preact components to static html and use them like custom elements.

> **Note:** This project is in early development, and versioning is a little different. [Read this](http://markup.im/#q4_cRZ1Q) for more details.
### Installation

`yarn add reshape-preact-ssr`
`yarn add reshape-preact-components`

### Usage

Expand All @@ -20,15 +20,15 @@ Setup is pretty simple -- just add the plugin to reshape and pass it an object w
```js
const {h} = require('preact')
const reshape = require('reshape')
const ssr = require('reshape-preact-ssr')
const renderComponents = require('reshape-preact-components')

const MyComponent = ({ foo }) => {
return h('p', {}, `the value of foo is "${foo}"`)
}

const html = "<my-component foo='bar' />"

reshape({ plugins: [ssr({ 'my-component': MyComponent })] })
reshape({ plugins: [renderComponents({ 'my-component': MyComponent })] })
.process(html)
.then((res) => {
console.log(res.output()) // <p>the value of foo is "bar"</p>
Expand Down Expand Up @@ -56,13 +56,13 @@ export default class SortableList {
}
```

Now you set up the component through the ssr plugin as such:
Now you set up the component through the plugin as such:

```js
const ssr = require('reshape-preact-ssr')
const renderComponents = require('reshape-preact-components')
const SortableList = require('./sortable-list')

ssr({ 'sortable-list': SortableList })
renderComponents({ 'sortable-list': SortableList })
```

And now in your html, you'd put down something like this:
Expand Down Expand Up @@ -103,15 +103,15 @@ render(
)
```

Ok so this works, but now we have some seriously non-DRY code. Now our markup has to be repeated both in our html for the initial static render, and in the client-side js for the client render. Luckily, reshape-preact-ssr has got your back. By default, it takes the initial html you used to render your preact element, parsed into a reshape AST and compressed as efficiently as possible, and gives it to your element as a prop called `_ssr`. It also provides a helper that you can use to decompress and hydrate it into a vdom tree that can be directly rendered by preact. So let's take advantage of this in our code and completely cut out all repetition - starting with our component.
Ok so this works, but now we have some seriously non-DRY code. Now our markup has to be repeated both in our html for the initial static render, and in the client-side js for the client render. Luckily, `reshape-preact-components` has got your back. By default, it takes the initial html you used to render your preact element, parsed into a reshape AST and compressed as efficiently as possible, and gives it to your element as a prop called `_state`. It also provides a helper that you can use to decompress and hydrate it into a vdom tree that can be directly rendered by preact. So let's take advantage of this in our code and completely cut out all repetition - starting with our component.

What we'll do here is put our compressed initial state on a data attribute so that our client-side js can pick it up and hydrate:

```js
export default class SortableList {
render () {
return (
<ul className='sortable' data-state={this.props._ssr}>
<ul className='sortable' data-state={this.props._state}>
<span className='sort-icon' />
{this.props.children}
</ul>
Expand Down Expand Up @@ -139,12 +139,12 @@ const sortableEl = document.querySelector('.sortable')
console.log(sortable.dataset.state)
```

Looking good -- now we can pull in `reshape-preact-ssr`'s helper function that will hydrate the initial state as a vdom tree that's directly renderable by preact. We just need to pass it the compressed initial state, and a remapping back from the custom element name to the actual component as we required it on the client side.
Looking good -- now we can pull in `reshape-preact-components`'s helper function that will hydrate the initial state as a vdom tree that's directly renderable by preact. We just need to pass it the compressed initial state, and a remapping back from the custom element name to the actual component as we required it on the client side.

```js
const {render} = require('preact')
const SortableList = require('./sortable-list')
const {hydrateInitialState} = require('reshape-preact-ssr/browser')
const {hydrateInitialState} = require('reshape-preact-components/browser')

const sortableEl = document.querySelector('.sortable')
const vdom = hydrateInitialState(sortableEl.dataset.state, {
Expand All @@ -154,16 +154,16 @@ const vdom = hydrateInitialState(sortableEl.dataset.state, {
console.log(vdom)
```

Note that for client side code, we require from `reshape-preact-ssr/browser`. Although full es-module compatibility would allow a selective import that avoided additional dependencies, at the moment both node stable and many build systems are *not* yet es-module compatible, so it's safer to import from a separate namespace to ensure there is no extra bloat for the client-side code.
Note that for client side code, we require from `reshape-preact-components/browser`. Although full es-module compatibility would allow a selective import that avoided additional dependencies, at the moment both node stable and many build systems are *not* yet es-module compatible, so it's safer to import from a separate namespace to ensure there is no extra bloat for the client-side code.

> *Note:* If you're using webpack2, you can require `reshape-preact-ssr/browser.esm` to get a version that uses es modules
> *Note:* If you're using webpack2, you can require `reshape-preact-components/browser.esm` to get a version that uses es modules
In the console log, you'll see that we have a full preact vdom ready to go, using the right components everywhere you needed them. Now the last step is just to render it!

```js
const {render} = require('preact')
const SortableList = require('./sortable-list')
const {hydrateInitialState} = require('reshape-preact-ssr')
const {hydrateInitialState} = require('reshape-preact-components/browser')

const sortableEl = document.querySelector('.sortable')
const vdom = hydrateInitialState(sortableEl.dataset.state, {
Expand Down Expand Up @@ -198,13 +198,13 @@ The second way is to serialize your full object, pass it in a single attribute,

```js
// app.js
const render = require('reshape-preact-ssr')
const renderComponents = require('reshape-preact-components')
const MyComponent = require('./my-component')

module.exports = {
reshape: htmlStandards({
locals: { encode: render.encode, data: { foo: 'bar' } },
appendPlugins: [render({ 'my-component': MyComponent })]
appendPlugins: [renderComponents({ 'my-component': MyComponent })]
})
}
```
Expand All @@ -217,7 +217,7 @@ module.exports = {
```js
// my-component.js
const {h} = require('preact')
const {decode} = require('reshape-preact-ssr/browser')
const {decode} = require('reshape-preact-components/browser')

module.exports = ({ data }) => {
const _data = decode(data)
Expand Down
4 changes: 2 additions & 2 deletions contributing.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Contributing to reshape-preact-ssr
# Contributing to reshape-preact-components

Hello there! First of all, thanks for being interested in reshape-preact-ssr and helping out. We all think you are awesome, and by contributing to open source projects, you are making the world a better place. That being said, there are a few ways to make the process of contributing code to reshape-preact-ssr smoother, detailed below:
Hello there! First of all, thanks for being interested in reshape-preact-components and helping out. We all think you are awesome, and by contributing to open source projects, you are making the world a better place. That being said, there are a few ways to make the process of contributing code to reshape-preact-components smoother, detailed below:

### Filing Issues

Expand Down
10 changes: 5 additions & 5 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
{
"name": "reshape-preact-ssr",
"name": "reshape-preact-components",
"description": "server render preact components and use them like custom elements",
"version": "0.4.0",
"author": "reshape",
"ava": {
"verbose": "true"
},
"browser": "lib/browser.js",
"bugs": "https://github.com/reshape/reshape-preact-ssr/issues",
"bugs": "https://github.com/reshape/reshape-preact-components/issues",
"dependencies": {
"preact": "^8.1.0",
"preact-render-to-string": "^3.6.2",
Expand All @@ -34,18 +34,18 @@
"engines": {
"node": ">= 6"
},
"homepage": "https://github.com/reshape/reshape-preact-ssr",
"homepage": "https://github.com/reshape/reshape-preact-components",
"keywords": [
"custom-elements",
"preact",
"react",
"reshape-plugin",
"server-side-render",
"ssr"
"components"
],
"license": "MIT",
"main": "lib",
"repository": "reshape/reshape-preact-ssr",
"repository": "reshape/reshape-preact-components",
"scripts": {
"build": "rm -rf lib && mkdir lib && cp src/index.js lib && cp src/serialize.js lib && cp src/reshape-ast-to-vdom.js lib && rollup -c rollup.browser.js && rollup -c rollup.ast-vdom.js",
"codecov": "nyc report -r lcovonly && codecov",
Expand Down

0 comments on commit 22094cd

Please sign in to comment.