mirror of
https://github.com/c8r/x0.git
synced 2024-09-11 13:45:52 +03:00
Experimenting with Head component
This commit is contained in:
parent
1a646d8402
commit
346b2b30e0
@ -1,6 +1,7 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { createProvider } from 'refunk'
|
import { createProvider } from 'refunk'
|
||||||
import Title from './Title'
|
import Title from './Title'
|
||||||
|
// import { Head } from '../lib'
|
||||||
|
|
||||||
const dec = state => ({ count: state.count - 1 })
|
const dec = state => ({ count: state.count - 1 })
|
||||||
const inc = 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 => (
|
const App = props => (
|
||||||
<div>
|
<div>
|
||||||
|
<title>Hello x0</title>
|
||||||
|
<meta charSet='utf-8' />
|
||||||
|
<style>{`body{background-color:gray}`}</style>
|
||||||
<Title>
|
<Title>
|
||||||
Hello {props.count}
|
Hello {props.count}
|
||||||
</Title>
|
</Title>
|
||||||
|
File diff suppressed because one or more lines are too long
@ -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>{
|
||||||
"title": "X0",
|
"title": "X0",
|
||||||
"count": 2,
|
"count": 2,
|
||||||
"baseurl": "/docs",
|
"baseurl": "/docs",
|
||||||
|
28
lib/Head.js
Normal file
28
lib/Head.js
Normal 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,3 +1,4 @@
|
|||||||
module.exports.dev = require('./dev')
|
module.exports.dev = require('./dev')
|
||||||
module.exports.static = require('./static')
|
module.exports.static = require('./static')
|
||||||
module.exports.Html = require('./static/Html')
|
module.exports.Html = require('./static/Html')
|
||||||
|
module.exports.Head = require('./Head')
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
const React = require('react')
|
const React = require('react')
|
||||||
const h = React.createElement
|
const h = React.createElement
|
||||||
|
|
||||||
module.exports = ({
|
const HTML = ({
|
||||||
title,
|
title,
|
||||||
description,
|
description,
|
||||||
image,
|
image,
|
||||||
@ -54,3 +54,8 @@ const danger = tag => val => h(tag, {
|
|||||||
|
|
||||||
const style = danger('style')
|
const style = danger('style')
|
||||||
const script = danger('script')
|
const script = danger('script')
|
||||||
|
|
||||||
|
module.exports = (props) => {
|
||||||
|
const html = HTML(props)
|
||||||
|
return html
|
||||||
|
}
|
||||||
|
@ -1,12 +1,12 @@
|
|||||||
const React = require('react')
|
const React = require('react')
|
||||||
const { render } = require('react-dom')
|
const { hydrate } = require('react-dom')
|
||||||
|
|
||||||
const App = require(COMPONENT).default || require(COMPONENT)
|
const App = require(COMPONENT).default || require(COMPONENT)
|
||||||
|
|
||||||
const data = document.getElementById('__initial-props__').innerHTML
|
const data = document.getElementById('__initial-props__').innerHTML
|
||||||
const props = JSON.parse(data)
|
const props = JSON.parse(data)
|
||||||
|
|
||||||
render(
|
hydrate(
|
||||||
React.createElement(App, props),
|
React.createElement(App, props),
|
||||||
app
|
app
|
||||||
)
|
)
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@compositor/x0",
|
"name": "@compositor/x0",
|
||||||
"version": "1.0.9",
|
"version": "1.0.10-0",
|
||||||
"description": "Zero-config React renderer and CLI",
|
"description": "Zero-config React renderer and CLI",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"bin": {
|
"bin": {
|
||||||
@ -24,8 +24,8 @@
|
|||||||
"meow": "^3.7.0",
|
"meow": "^3.7.0",
|
||||||
"opn": "^5.1.0",
|
"opn": "^5.1.0",
|
||||||
"pkg-up": "^2.0.0",
|
"pkg-up": "^2.0.0",
|
||||||
"react": "^15.6.1",
|
"react": "^16.0.0",
|
||||||
"react-dom": "^15.6.1",
|
"react-dom": "^16.0.0",
|
||||||
"read-pkg-up": "^2.0.0",
|
"read-pkg-up": "^2.0.0",
|
||||||
"update-notifier": "^2.2.0",
|
"update-notifier": "^2.2.0",
|
||||||
"webpack": "^3.5.6",
|
"webpack": "^3.5.6",
|
||||||
|
Loading…
Reference in New Issue
Block a user