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 { 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>
|
||||
|
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",
|
||||
"count": 2,
|
||||
"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.static = require('./static')
|
||||
module.exports.Html = require('./static/Html')
|
||||
module.exports.Head = require('./Head')
|
||||
|
@ -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
|
||||
}
|
||||
|
@ -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
|
||||
)
|
||||
|
@ -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",
|
||||
|
Loading…
Reference in New Issue
Block a user