README.CN.md

@@ -47,15 +47,26 @@ render(<counter-demo />, document.body)
 npm i omi
 ```
 
+快速创建 Omi + Vite + TS/JS 项目：
+
+```bash
+$ npx omi-cli init my-app    # 或者创建js项目: npx omi-cli init-js my-app
+$ cd my-app           
+$ npm start           # develop
+$ npm run build       # release
+```
+
 ### 包
 
 - 核心包
   - [`omi`](https://github.com/Tencent/omi/tree/master/packages/omi) - Omi 框架的实现代码。
+  - [`omi-cli`](https://github.com/omijs/cli) - 快速创建 Omi + Vite + TS/JS 项目。
 - 入门套件 (未发布到 npm)
   - [`omi-starter-ts`](https://github.com/Tencent/omi/tree/master/packages/omi-starter-ts) - 基于Vite + Omi + TypeScript 的模板。
   - [`omi-starter-js`](https://github.com/Tencent/omi/tree/master/packages/omi-starter-js) - 基于Vite + Omi + JavaScript 的模板。
 - Components
   - [`tdesign-icons-omi`](https://github.com/omijs/tdesign-icons) - 基于 TDesign 和 Omi 的跨框架 icon 集合。
+  - [`tdesign-omi`](https://github.com/omijs/tdesign) - `[进行中...]`基于 TDesign 和 Omi 的跨框架 组件 集合。 [点击这里预览一下](https://omijs.github.io/tdesign/)
 - 综合性例子 (未发布到 npm)
   - [`snake-game-2tier`](https://github.com/Tencent/omi/tree/master/packages/snake-game-2tier) - 基于 Omi `Signal` class 两层架构的贪吃蛇游戏。
   - [`snake-game-3tier`](https://github.com/Tencent/omi/tree/master/packages/snake-game-3tier) - 基于 Omi 响应是函数三层架构的贪吃蛇游戏。
@@ -240,6 +251,43 @@ render(<todo-list />, document.body)
 
 这里不讨论哪种方式(DOP,OOP)的好坏，使用 omi 两种方式都可以任意选择。
 
+## 自动导入 h
+
+vite.config.js:
+
+```tsx
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  esbuild: {
+    jsxInject: "import { h } from 'omi'",
+    jsxFactory: "h",
+    jsxFragment: "h.f"
+  }
+})
+```
+
+你可以在构建时候注入代码，这样就不用手动导出 `h`。
+
+## 集成 Twind
+
+```tsx
+import { Component, define, h } from 'omi'
+
+import install from '@twind/with-web-components'
+import { defineConfig } from '@twind/core'
+import presetAutoprefix from '@twind/preset-autoprefix'
+import presetTailwind from '@twind/preset-tailwind'
+const withTwind = install(defineConfig({
+  presets: [presetAutoprefix(), presetTailwind()],
+}))
+
+define('my-app', class extends withTwind(Component) {
+  render() {
+    return <h1 class="text-3xl font-bold underline">Hello world!</h1>
+  }
+})
+```
 
 ## 贡献者
 

README.md

@@ -46,15 +46,26 @@ render(<counter-demo />, document.body)
 npm i omi
 ```
 
+To quickly create an Omi + Vite + TS/JS project:
+
+```bash
+$ npx omi-cli init my-app    # or create js project by: npx omi-cli init-js my-app
+$ cd my-app           
+$ npm start           # develop
+$ npm run build       # release
+```
+
 ### Packages
 
 - Core packages
   - [`omi`](https://github.com/Tencent/omi/tree/master/packages/omi) - Implementation of omi framework.
+  - [`omi-cli`](https://github.com/omijs/cli) - To quickly create an Omi + Vite + TS/JS project.
 - Starter kits (not published to npm)
   - [`omi-starter-ts`](https://github.com/Tencent/omi/tree/master/packages/omi-starter-ts) - A starter repo for building web app or reusable components using Omi in TypeScript base on Vite.
   - [`omi-starter-js`](https://github.com/Tencent/omi/tree/master/packages/omi-starter-js) - A starter repo for building web app or reusable components using Omi in JavaScript base on Vite.
 - Components
-  - [`tdesign-icons-omi`](https://github.com/omijs/tdesign-icons) - Cross framework icon collection based on tdesign design architecture and omi.
+  - [`tdesign-icons-omi`](https://github.com/omijs/tdesign-icons) - Cross framework icon collection based on tdesign.
+  - [`tdesign-omi`](https://github.com/omijs/tdesign) - `[in progress...]`Cross framework components based on tdesign. [Preview](https://omijs.github.io/tdesign/)
 - Examples (not published to npm)
   - [`snake-game-2tier`](https://github.com/Tencent/omi/tree/master/packages/snake-game-2tier) - SNake Game with `Signal` class
   - [`snake-game-3tier`](https://github.com/Tencent/omi/tree/master/packages/snake-game-3tier) - SNake Game with reactivity functions
@@ -238,6 +249,45 @@ render(<todo-list />, document.body)
 
 We won't discuss which method is good or bad here. You can choose either method using omi.
 
+## Auto Import h
+
+vite.config.js:
+
+```tsx
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  esbuild: {
+    jsxInject: "import { h } from 'omi'",
+    jsxFactory: "h",
+    jsxFragment: "h.f"
+  }
+})
+```
+
+You can inject code during construction, so you don't have to manually export `h`.
+
+## With Twind
+
+```tsx
+import { Component, define, h } from 'omi'
+
+import install from '@twind/with-web-components'
+import { defineConfig } from '@twind/core'
+import presetAutoprefix from '@twind/preset-autoprefix'
+import presetTailwind from '@twind/preset-tailwind'
+const withTwind = install(defineConfig({
+  presets: [presetAutoprefix(), presetTailwind()],
+}))
+
+define('my-app', class extends withTwind(Component) {
+  render() {
+    return <h1 class="text-3xl font-bold underline">Hello world!</h1>
+  }
+})
+```
+
+
 ## Contributors
 
 <a href="https://github.com/Tencent/omi/graphs/contributors">

packages/omi/README.md

@@ -44,15 +44,26 @@ render(<counter-demo />, document.body)
 npm i omi
 ```
 
+To quickly create an Omi + Vite + TS/JS project:
+
+```bash
+$ npx omi-cli init my-app    # or create js project by: npx omi-cli init-js my-app
+$ cd my-app           
+$ npm start           # develop
+$ npm run build       # release
+```
+
 ### Packages
 
 - Core packages
   - [`omi`](https://github.com/Tencent/omi/tree/master/packages/omi) - Implementation of omi framework.
+  - [`omi-cli`](https://github.com/omijs/cli) - To quickly create an Omi + Vite + TS/JS project.
 - Starter kits (not published to npm)
   - [`omi-starter-ts`](https://github.com/Tencent/omi/tree/master/packages/omi-starter-ts) - A starter repo for building web app or reusable components using Omi in TypeScript base on Vite.
   - [`omi-starter-js`](https://github.com/Tencent/omi/tree/master/packages/omi-starter-js) - A starter repo for building web app or reusable components using Omi in JavaScript base on Vite.
 - Components
-  - [`tdesign-icons-omi`](https://github.com/omijs/tdesign-icons) - Cross framework icon collection based on tdesign design architecture and omi.
+  - [`tdesign-icons-omi`](https://github.com/omijs/tdesign-icons) - Cross framework icon collection based on tdesign.
+  - [`tdesign-omi`](https://github.com/omijs/tdesign) - `[in progress...]`Cross framework components based on tdesign. [Preview](https://omijs.github.io/tdesign/)
 - Examples (not published to npm)
   - [`snake-game-2tier`](https://github.com/Tencent/omi/tree/master/packages/snake-game-2tier) - SNake Game with `Signal` class
   - [`snake-game-3tier`](https://github.com/Tencent/omi/tree/master/packages/snake-game-3tier) - SNake Game with reactivity functions
@@ -236,6 +247,45 @@ render(<todo-list />, document.body)
 
 We won't discuss which method is good or bad here. You can choose either method using omi.
 
+## Auto Import h
+
+vite.config.js:
+
+```tsx
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  esbuild: {
+    jsxInject: "import { h } from 'omi'",
+    jsxFactory: "h",
+    jsxFragment: "h.f"
+  }
+})
+```
+
+You can inject code during construction, so you don't have to manually export `h`.
+
+## With Twind
+
+```tsx
+import { Component, define, h } from 'omi'
+
+import install from '@twind/with-web-components'
+import { defineConfig } from '@twind/core'
+import presetAutoprefix from '@twind/preset-autoprefix'
+import presetTailwind from '@twind/preset-tailwind'
+const withTwind = install(defineConfig({
+  presets: [presetAutoprefix(), presetTailwind()],
+}))
+
+define('my-app', class extends withTwind(Component) {
+  render() {
+    return <h1 class="text-3xl font-bold underline">Hello world!</h1>
+  }
+})
+```
+
+
 ## Contributors
 
 <a href="https://github.com/Tencent/omi/graphs/contributors">

packages/omi/package.json

@@ -1,6 +1,6 @@
 {
   "name": "omi",
-  "version": "7.1.2",
+  "version": "7.1.3",
   "scripts": {
     "start": "vite",
     "dev-vite": "vite",
@@ -35,7 +35,7 @@
     "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.7.0",
     "microbundle": "^0.15.1",
-    "tdesign-icons-omi": "^0.0.8",
+    "tdesign-icons-omi": "latest",
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",
     "typedoc": "^0.25.1",

packages/omi/src/component.ts

@@ -1,4 +1,4 @@
-import { isArray, hyphenate, capitalize, createStyleSheet } from './utils'
+import { isArray, hyphenate, capitalize, createStyleSheet, createStyleElement } from './utils'
 import { diff } from './diff'
 import { ExtendedElement } from './dom'
 import 'weakmap-polyfill'
@@ -34,6 +34,8 @@ export class Component extends HTMLElement {
   injection?: { [key: string]: unknown }
   renderRoot?: ExtendedElement | ShadowRoot | Component
   rootElement: ExtendedElement | ExtendedElement[] | null
+  private _customStyleContent: string | null
+  private _customStyleElement: HTMLStyleElement | null
 
   constructor() {
     super()
@@ -43,6 +45,8 @@ export class Component extends HTMLElement {
     this.isInstalled = false
     this.rootElement = null
     this.prevProps = null
+    this._customStyleContent = null
+    this._customStyleElement = null
   }
 
   injectObject() {
@@ -136,6 +140,13 @@ export class Component extends HTMLElement {
     setActiveComponent(null)
     this.rootElement = diff(null, rendered as VNode, null, this, false)
     this.rendered()
+
+    if (this.props.css) {
+      this._customStyleElement = createStyleElement(this.props.css as string)
+      this._customStyleContent = this.props.css as string
+      this.renderRoot?.appendChild(this._customStyleElement)
+    }
+
     if (isArray(this.rootElement)) {
       (this.rootElement as Element[]).forEach((item) => {
         this.renderRoot?.appendChild(item)
@@ -147,15 +158,24 @@ export class Component extends HTMLElement {
     this.isInstalled = true
   }
 
-  disconnectedCallback(): void {
-    this.uninstall()
-    this.isInstalled = false
+  private updateCustomStyle(): void {
+    // fix null !== undefined
+    if (this._customStyleContent != this.props.css) {
+      this._customStyleContent = this.props.css as string
+      if (this._customStyleElement) {
+        this._customStyleElement.textContent = this._customStyleContent
+      } else {
+        // When prop css initially has no value, but later has a value
+        this._customStyleElement = createStyleElement(this.props.css as string)
+        this.renderRoot?.appendChild(this._customStyleElement)
+      }
+    }
   }
 
   update(updateSelf?: boolean): void {
-
     this.beforeUpdate()
     this.beforeRender()
+    this.updateCustomStyle()
     this.attrsToProps()
     setActiveComponent(this)
     // @ts-ignore
@@ -206,6 +226,7 @@ export class Component extends HTMLElement {
   attrsToProps(): void {
     if (this.props.ignoreAttrs) return
     const ele = this
+    ele.props['css'] = ele.getAttribute('css')
     const attrs = (this.constructor as typeof Component).propTypes
     if (!attrs) return
     Object.keys(attrs).forEach((key) => {

packages/omi/src/index.ts

@@ -7,6 +7,6 @@ export { createRef, bind } from './utils'
 export { signal, computed, effect, batch, setActiveComponent, getActiveComponent } from './reactivity'
 export { Signal } from './signal'
 export { css } from './css-tag'
-export const version = '7.1.2'
+export const version = '7.1.3'
 
 

packages/omi/src/utils.ts

@@ -96,6 +96,17 @@ export function createStyleSheet(style: string): CSSStyleSheet {
   return styleSheet
 }
 
+/**
+ * Creates a <style> element with the specified CSS content.
+ * @param css - The CSS content to be applied to the <style> element.
+ * @returns The created <style> element.
+ */
+export function createStyleElement(css: string): HTMLStyleElement {
+  const styleElement: HTMLStyleElement = document.createElement('style')
+  styleElement.textContent = css
+  return styleElement
+}
+
 /**
  * Check if two nodes are equivalent.
  * @param node - The DOM Node to compare.