diff --git a/integrations/javascript.md b/integrations/javascript.md
index 9f10aa6c..c6319086 100644
--- a/integrations/javascript.md
+++ b/integrations/javascript.md
@@ -1,46 +1,46 @@
-# Windi CSS JavaScript API
+# Windi CSS 的 JavaScript API {#windi-css-javascript-api}
-## About
+## 关于 {#about}
-If using the CLI does not fit your workflow, you could directly use the Windi CSS API.
+如果使用命令行工具不能适配你的工作流,你可以直接使用 Windi CSS API。
-## Install
+## 安装 {#install}
-Add the package:
+添加包:
```bash
npm i -D windicss
```
-## Usage
+## 用法 {#usage}
-### Setup with interpret mode
+### 以解释模式开始 {#setup-with-interpret-mode}
```js
const { Processor } = require('windicss/lib')
const { HTMLParser } = require('windicss/utils/parser')
export function generateStyles(html) {
- // Get windi processor
+ // 获取 windi processor
const processor = new Processor()
- // Parse all classes and put into one line to simplify operations
+ // 解析所有的 classes 并将它们放到一行来简化操作
const htmlClasses = new HTMLParser(html)
.parseClasses()
.map(i => i.result)
.join('')
- // Generate preflight based on the html we input
+ // 基于我们传入的 html 生成预检样式
const preflightSheet = processor.preflight(html)
- // Process the html classes to an interpreted style sheet
+ // 将 html classes 处理为一个可解释的样式表
const interpretedSheet = processor.interpret(htmlClasses).styleSheet
- // Build styles
+ // 构建样式
const APPEND = false
const MINIFY = false
const styles = interpretedSheet.extend(preflightSheet, APPEND).build(MINIFY)
@@ -49,24 +49,24 @@ export function generateStyles(html) {
}
```
-### Setup with compile mode
+### 以编译模式开始 {#setup-with-compile-mode}
-Compile mode requires a bit more leg work to swap out the compiled classnames for the current ones.
+编译模式需要更多的工作来替换当前编译的 classname。
-Read more about compile mode [here](/posts/modes.html).
+在 [这里](/posts/modes.html) 可以了解更多关于编译模式的内容。
```js
const { Processor } = require('windicss/lib')
const { HTMLParser } = require('windicss/utils/parser')
export function generateStyles(html) {
- // Get windi processor
+ // 获取 windi processor
const processor = new Processor()
- // Parse html to get array of class matches with location
+ // 解析 html 获取与 location 匹配的 class 数组
const parser = new HTMLParser(html)
- // Generate preflight based on the html we input
+ // 基于我们输入的 html 生成预检样式
const preflightSheet = processor.preflight(html)
const PREFIX = 'windi-'
@@ -75,29 +75,29 @@ export function generateStyles(html) {
let indexStart = 0
parser.parseClasses().forEach((p) => {
- // add HTML substring from index to match start
+ // 将 HTML 子字符串添加到从索引到匹配开始的位置
outputHTML += html.substring(indexStart, p.start)
- // generate stylesheet
+ // 生成样式表
const style = processor.compile(p.result, PREFIX)
- // add the styleSheet to the styles stack
+ // 将样式表加到样式堆栈
outputCSS.push(style.styleSheet)
- // append ignored classes and push to output
+ // 添加被忽略的 classes 并添加到 output
outputHTML += [style.className, ...style.ignored].join(' ')
- // mark the end as our new start for next itteration
+ // 为下一次迭代将结束的位置标记为新的开始
indexStart = p.end
})
- // append the remainder of html
+ // 追加 html 其余的部分
outputHTML += html.substring(indexStart)
- // Build styles
+ // 构建样式
const MINIFY = false
const styles = outputCSS
- // extend the preflight sheet with each sheet from the stack
+ // 为堆栈中的每个样式表拓展预检样式的样式表
.reduce((acc, curr) => acc.extend(curr), preflightSheet)
.build(MINIFY)
@@ -108,57 +108,57 @@ export function generateStyles(html) {
}
```
-### Setup with attributify mode
+### 以属性模式开始 {#setup-with-attributify-mode}
-Attributify mode requires a bit more leg work to parse each individual attribute.
+属性模式需要更多的工作来解析每个独立的属性.
-Read more about attributify mode [here](/posts/v30.html#attributify-mode)
-And you can find the syntax [here](/posts/attributify.html)
+在 [这里](/posts/v30.html#attributify-mode) 了解更多关于属性模式的内容
+并且你可以在 [这里](/posts/attributify.html) 找到语法
```js
const { Processor } = require('windicss/lib')
const { HTMLParser } = require('windicss/utils/parser')
export function generateStyles(html) {
- // Get windi processor
+ // 获取 windi processor
const processor = new Processor()
- // Parse html to get array of class matches with location
+ // 解析 html 获取与 location 匹配的 class 数组
const parser = new HTMLParser(html)
- // Generate preflight based on the html we input
+ // 基于我们输入的 html 生成预检样式
const preflightSheet = processor.preflight(html)
- // Always returns array
+ // 总是返回数组
const castArray = val => (Array.isArray(val) ? val : [val])
const attrs = parser.parseAttrs().reduceRight((acc, curr) => {
- // get current match key
+ // 获取当前匹配到的 key
const attrKey = curr.key
- // ignore class or className attributes
+ // 忽略 class 或 className 属性
if (attrKey === 'class' || attrKey === 'className') return acc
- // get current match value as array
+ // 以数组类型获取当前匹配到的值,
const attrValue = castArray(curr.value)
- // if current match key is already in accumulator
+ // 如果当前匹配到的 key 早在累加器之中了
if (attrKey in acc) {
- // get current attr key value as array
+ // 以数组类型获取当前属性的键值
const attrKeyValue = castArray(acc[attrKey])
- // append current value to accumulator value
+ // 将当前的值追加到累加器值
acc[attrKey] = [...attrKeyValue, ...attrValue]
}
else {
- // else add atrribute value array to accumulator
+ // 将属性值数组添加到累加器
acc[attrKey] = attrValue
}
return acc
}, {})
- // Build styles
+ // 构建样式
const MINIFY = false
const styles = processor
.attributify(attrs)