加强安全部门改革

服务器侧渲染 自定义元素。 。 。 .

通过支持自定义元素和 语法。 。 。 .

安装

npm i @enhance/ssr

使用量

import HelloWorld from './path/to/elements/hello-world.mjs'
import enhance from '@enhance/ssr'
const html = enhance({
  elements: {
    'hello-world': HelloWorld
  }
})
console.log(html`<hello-world greeting="Well hi!"></hello-world>`)

用于服务器侧面渲染的自定义元素模板

元素是传递的纯函数,该函数包含 html 函数用于扩展自定义元素和由 attrs 是自定义元素上设置的属性和 a store 包含应用程序状态的对象.

export default function HelloWorld({ html, state }) {
  const { attrs } = state
  const { greeting='Hello World' } = attrs
  return html`
    <style scope="global">
      h1 {
        color: red;
      }
    </style>

    <h1>${greeting}</h1>
  `
}

输出

<head>
  <style scope="global">
    h1 {
      color: red;
    }
  </style>
</head>

<body>
<hello-world>
  <h1>Hello World</h1>
</hello-world>
</body>

渲染函数

您也可以使用显示对象 render 函数作为模板。 渲染函数会通过相同的参数 { html:function, state:object }。 。 。 .

{
  attrs: [ 'label' ],
  init(el) {
    el.addEventListener('click', el.click)
  },
  render({ html, state }) {
    const { attrs={} } = state
    const { label='Nope' } = attrs
    return html`
    <pre>
      ${JSON.stringify(state)}
    </pre>
    <button>${ label }</button>
    `
  },
  click(e) {
    console.log('CLICKED')
  },
  adopted() {
    console.log('ADOPTED')
  },
  connected() {
    console.log('CONNECTED')
  },
  disconnected() {
    console.log('DISCONNECTED')
  }
}

使用这些选项对象 增强自定义元件厂

存储

供应初始状态加强,并将在 store 对象嵌入状态对象.

节点

import MyStoreData from './path/to/elements/my-store-data.mjs'
import enhance from '@enhance/ssr'
const html = enhance({
  elements: {
    'my-store-data': MyStoreData
  },
  initialState: { apps: [ { users: [ { name: 'tim', id: 001 }, { name: 'kim', id: 002 } ] } ] }
})
console.log(html`<my-store-data app-index="0" user-index="1"></my-store-data>`)

元素模板

export default function MyStoreData({ html, state }) {
  const { attrs, store } = state
  const appIndex = attrs['app-index']
  const userIndex = attrs['user-index']
  const { id='', name='' } = store?.apps?.[appIndex]?.users?.[userIndex] || {}
  return `
<div>
  <h1>${name}</h1>
  <h1>${id}</h1>
</div>
  `
}

该商店用于将状态传递给树上的所有组件.

槽数

加强支持使用 slots 在自定义元素模板中。 。 。 .

export default function MyParagraph({ html }) {
  return html`
<p>
  <slot name="my-text">
    My default text
  </slot>
</p>
  `
}

您可以通过添加一个与要替换的槽名相匹配的槽属性来覆盖默认文本.

<my-paragraph>
  <span slot="my-text">Let's have some different text!</span>
</my-paragraph>

未命名槽

当您要为所有未分档的儿童节点创建容器元素时, 增强支持未命名的槽 .

export default function MyButton({ html }) {
  return html`
<button>
  <slot>Submit</slot>
</button>
  `
}

<my-button></my-button>

<my-button>Save</my-button>

变换

增强支持包含脚本和样式转换功能. 您将函数添加到 scriptTransforms 和(或) styleTransforms 并且可以随意改变内容, 只要返回你想要的输出.

import enhance from '@enhance/ssr'

const html = enhance({
  elements: {
    'my-transform-script': MyTransformScript
  },
  scriptTransforms: [
    function({ attrs, raw }) {
      // raw is the raw text from inside the script tag
      // attrs are the attributes from the script tag
      return raw + ' yolo'
    }
  ],
  styleTransforms: [
    function({ attrs, raw }) {
      // raw is the raw text from inside the style tag
      // attrs are the attributes from the style tag
      const { scope } = attrs
      return `
      /* Scope: ${ scope } */
      ${ raw }
      `
    }
  ]
})

function MyTransformScript({ html }) {
  return html`
<style scope="component">
  :host {
    display: block;
  }
</style>
<h1>My Transform Script</h1>
<script type=module>
  class MyTransformScript extends HTMLElement {
    constructor() {
      super()
    }
  }
  customElements.define('my-transform-script', MyTransformScript)
</script>
  `
}

console.log(html`<my-transform-script></my-transform-script>`)

context

有时你需要通过状态 来决定巢中的孩子的定制元素。 避免通过多层次的嵌入元素传递属性的ium context 对象将状态添加到 .

父集上下文

export default function MyContextParent({ html, state }) {
  const { attrs, context } = state
  const { message } = attrs
  context.message = message

  return html`
    <slot></slot>
  `
}

儿童从提供上下文获取状态

export default function MyContextChild({ html, state }) {
  const { context } = state
  const { message } = context
  return html`
    <span>${ message }</span>
  `
}

撰写

<my-context-parent message="hmmm">
  <div>
    <span>
      <my-context-child></my-context-child>
    </span>
  </div>
</my-context-parent>

instanceID

在从单一模板中渲染自定义元素时, 有时您可能需要瞄准特定实例 。 这个 instanceID 以 state 对象.

export default function MyInstanceID({ html, state }) {
  const { instanceID='' } = state

  return html`
<p>${instanceID}</p>
  `
}

bodyContent

增强 SSR 输出整个有效的 HTML 页面,但您可以通过 bodyContent: true 以获取内容 <body> 键。 当您想要将 HTML 输出隔离到您正在撰写的自定义元素时, 这会有所帮助 .

const html = enhance({
  bodyContent: true,
  elements: {
    'my-paragraph': MyParagraph,
  }
})
const output = html`
<my-paragraph></my-paragraph>
  `

与 <html>, (中文(简体) ), <head>,以及 <body> 要素

加强安保部门改革将明智地合并其渲染 <html>, (中文(简体) ), <head>,以及 <body> 含有任何元素的元素(除非您选择使用) bodyContent: true 选项).

例如:

const html = enhance({
  elements: {
    'my-content': MyContent,
  }
})

html`
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>My Website</title>
  </head>
  <body class="foo bar">
    <my-content></my-content>
  </body>
</html>
`

P. S. 增强工作确实很好 开始。 。 。 .