c8r/x0
1
1
Fork 0
mirror of https://github.com/c8r/x0.git synced 2024-08-16 08:50:29 +03:00
Code Issues Projects Releases Wiki Activity

Experimenting with Head component

Browse Source
This commit is contained in:
Brent Jackson 2017-10-07 09:38:46 -04:00
parent 1a646d8402
commit 346b2b30e0
9 changed files with 48 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.npmrc Normal file
View File

@ -0,0 +1 @@
package-lock=false

4
docs/App.js
View File

@ -1,6 +1,7 @@
import React from 'react'
import { createProvider } from 'refunk'
import Title from './Title'
// import { Head } from '../lib'
const dec = state => ({ count: state.count - 1 })
const inc = state => ({ count: state.count + 1 })
@ -9,6 +10,9 @@ const Debug = props => <pre children={JSON.stringify(props, null, 2)} />
const App = props => (
<div>
<title>Hello x0</title>
<meta charSet='utf-8' />
<style>{`body{background-color:gray}`}</style>
<Title>
Hello {props.count}
</Title>

18
docs/bundle.js
View File

File diff suppressed because one or more lines are too long

2
docs/index.html
View File

@ -1,4 +1,4 @@
<!DOCTYPE html><html><head><title>X0</title><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><meta name="description"/><style>.x0{color:tomato}</style></head><body><div id="app"><div data-reactroot="" data-reactid="1" data-react-checksum="733660453"><h1 class="x0" data-reactid="2"><!-- react-text: 3 -->Hello <!-- /react-text --><!-- react-text: 4 -->2<!-- /react-text --></h1><button data-reactid="5">-</button><button data-reactid="6">+</button><pre data-reactid="7">{
<!DOCTYPE html><html><head><title>X0</title><meta charSet="utf-8"/><meta name="generator" content="Compositor x0"/><meta name="viewport" content="width=device-width, initial-scale=1"/><meta name="description"/><style>.x0{color:tomato}</style></head><body><div id="app"><div data-reactroot=""><h1 class="x0">Hello <!-- -->2</h1><button>-</button><button>+</button><pre>{
&quot;title&quot;: &quot;X0&quot;,
&quot;count&quot;: 2,
&quot;baseurl&quot;: &quot;/docs&quot;,

28
lib/Head.js Normal file
View File

@ -0,0 +1,28 @@
const React = require('react')
const { renderPortal } = require('react-dom')
class Head extends React.Component {
constructor () {
super()
this.renderHead = () => {
const children = React.Children.toArray(this.props.children)
const head = document.querySelector('head')
renderPortal(
children,
head
)
}
}
componentDidMount () {
// this.renderHead()
}
render () {
console.log(this.props)
return false
}
}
module.exports = Head

1
lib/index.js
View File

@ -1,3 +1,4 @@
module.exports.dev = require('./dev')
module.exports.static = require('./static')
module.exports.Html = require('./static/Html')
module.exports.Head = require('./Head')

7
lib/static/Html.js
View File

@ -1,7 +1,7 @@
const React = require('react')
const h = React.createElement
module.exports = ({
const HTML = ({
title,
description,
image,
@ -54,3 +54,8 @@ const danger = tag => val => h(tag, {
const style = danger('style')
const script = danger('script')
module.exports = (props) => {
const html = HTML(props)
return html
}

4
lib/static/entry.js
View File

@ -1,12 +1,12 @@
const React = require('react')
const { render } = require('react-dom')
const { hydrate } = require('react-dom')
const App = require(COMPONENT).default || require(COMPONENT)
const data = document.getElementById('__initial-props__').innerHTML
const props = JSON.parse(data)
render(
hydrate(
React.createElement(App, props),
app
)

6
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@compositor/x0",
"version": "1.0.9",
"version": "1.0.10-0",
"description": "Zero-config React renderer and CLI",
"main": "index.js",
"bin": {
@ -24,8 +24,8 @@
"meow": "^3.7.0",
"opn": "^5.1.0",
"pkg-up": "^2.0.0",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"read-pkg-up": "^2.0.0",
"update-notifier": "^2.2.0",
"webpack": "^3.5.6",