Home

Welcome!

The aim of this wiki is to collate all the Tapestry discussions we usually have on Slack into a single reference-able place. It will cover the Tapestry code-base, what's already been written and agreed upon, any road-blocks and cool #fewtch features we want to add, as well as how it's consumed within a parent application and any cross-over points in-between. Hopefully we'll arrive at an agreed MVP that we can plan and organise within Trello.

Tapestry

Tapestry should provide a simple way to create a Wordpress API led, React rendered website. It should handle booting the server, bundling the client, routing, production builds, deployment, styling etc. The parent application should only need to pass a Wordpress URL and a set of top-level components that match Wordpress's default data-types, a post, page and category.

It should allow us to create a site with a folder structure similar to this:

website/
  components/
    base.js
    category.js
    page.js
    post.js
  package.json
  tapestry.config.js

With each top-level component consuming props directly from the API, props in this case will be the exact json data returned from an API call.

import React from 'react'

const Component = (props) =>
  <h1>{props.title.rendered}</h1>

export default Component

Who knows what tapestry.config.js will eventually turn out like, but for now it exports an object referencing the top-level components and site url.

import Base from './components/base'
import Category from './components/category'
import Page from './components/page'
import Post from './components/post'

export default {
  components: { Base, Post, Page, Category },
  url: 'foundry.press'
}

How to do the compilation

• Write your "parent project" in ES6 using import syntax
• Include a .babelrc plugin in your "parent project"
• Have Tapestry spawn a new process to transpile it to ES5
• Use an auto-install-and-load-npm-modules module to get around missing plugins in babelrc?
• Transpile the "app tree" to ES5 and place it somewhere in the server.
• The Tapestry web-server will load in the ES5 app tree and render HTML
• The Tapestry client-build will load in the ES5 app tree into the "shell" client.js which includes react-dom and async-props etc.

Coupla notes about that compilation stuff

• The Webpack config needs libraryTarget: "commonjs2" to correctly return a component tree once imported on the server.
• The server needs to be written with require()s.
• I think we're going to have to React.createElement on the server as we won't be transpiling the code-base, it'll impact these files:
  • server.js - <AsyncProps /> & <DefaultHTML /> - not a biggie
  • default-routes.js - We can use the object syntax rather than JSX here right? Route config?
  • default-html.js - Replace with a template literal? Helmet has a toString() method for this use-case.
  • Loaders - We're only returning a single element in the render method so shouldn't be an issue, but this might change anyway if we're rethinking loaders.