feat: support tailwind css #1605
Conversation
WalkthroughAdds an enableTailwindCSS flag to engine configs and propagates it through preview, canvas import-map and HTML injection, and project template generation; removes broad CSS resets; introduces BasicTagConfigurator and ClassConfigurator components; updates codegen/generator signatures and import-map to support optional Tailwind runtime and scaffolding. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant User as User
participant App as Designer App
participant DC as DesignCanvas
participant IM as getImportMapData
participant IC as initCanvas
participant Browser as Browser
User->>App: open canvas / preview
App->>DC: mount canvas with deps
DC->>IM: getImportMapData(deps)
IM->>IM: read engine.config.enableTailwindCSS
alt Tailwind enabled
IM-->>DC: { importMap, importStyles, importScripts:['@tailwindcss/browser URL'] }
else
IM-->>DC: { importMap, importStyles, importScripts:[] }
end
DC->>IC: initCanvas(importMap, importStyles, importScripts)
IC->>Browser: HTML with IMPORT_MAP, IMPORT_STYLE, IMPORT_SCRIPT injected
alt importScripts not empty
Browser->>Browser: load @tailwindcss/browser runtime
end
sequenceDiagram
autonumber
participant Gen as GenerateCodeService
participant VG as vue-generator
participant TF as TemplateFiles
participant Out as Generated Project
Gen->>VG: generateTemplate(schema, { enableTailwindCSS })
VG->>TF: genViteConfig(schema, options)
TF-->>VG: vite.config (with Tailwind plugin if enabled)
VG->>TF: packageJson(schema, options)
TF-->>VG: package.json (with Tailwind deps if enabled)
VG->>TF: mainJSFile(options)
alt enableTailwindCSS
TF-->>VG: include src/style.css (@import "tailwindcss")
end
VG-->>Out: project files
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
Tip 👮 Agentic pre-merge checks are now available in preview!Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.
Please see the documentation for more information. Example: reviews:
pre_merge_checks:
custom_checks:
- name: "Undocumented Breaking Changes"
mode: "warning"
instructions: |
Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).Please share your feedback with us on this Discord post. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
github-actions
bot
added
documentation
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 10
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
packages/vue-generator/src/plugins/genTemplatePlugin.js (1)
8-19: Also pass options to a custom options.template callback.Currently
options.template(schema, context)can’t see feature flags (e.g.,enableTailWindCSS). Forwardoptionsto avoid divergence between custom and built-in templates.Apply:
- const res = options.template(schema, context) + const res = options.template(schema, context, options)Backward compatible: existing callbacks can ignore the third param.
packages/design-core/src/preview/src/preview/generate.js (1)
153-171: Bug: Tailwind import is skipped when cssList is empty.Early return at Line 155 prevents
@tailwindcss/browserfrom loading unless CSS files exist, breaking the feature in projects without extra CSS.Apply:
-export const processAppJsCode = (code, cssList, enableTailWindCSS) => { - if (!Array.isArray(cssList) || !cssList.length) { - return code - } - - let res = `${code}\n` - - cssList.forEach((css) => { - if (!code.includes(`addCss('${css}')`)) { - res += `addCss('${css}')\n` - } - }) - - if (enableTailWindCSS) { - res += `\nimport('@tailwindcss/browser')\n` - } - - return res -} +export const processAppJsCode = (code, cssList, enableTailWindCSS) => { + let res = `${code}\n` + + if (Array.isArray(cssList) && cssList.length) { + cssList.forEach((css) => { + if (!code.includes(`addCss('${css}')`)) { + res += `addCss('${css}')\n` + } + }) + } + + if (enableTailWindCSS && !code.includes('@tailwindcss/browser')) { + res += `\nimport('@tailwindcss/browser')\n` + } + + return res +}
🧹 Nitpick comments (22)
packages/plugins/materials/src/js/options.ts (1)
38-41: ClassConfigurator export verified; optional placeholderClassConfigurator is already imported and exported in packages/configurator/src/index.ts, so no registry changes are needed.
Optionally, add a Tailwind hint placeholder:widget: { component: 'ClassConfigurator', props: { + inputProps: { placeholder: '支持 Tailwind 类名，双击标签可编辑' } } },packages/configurator/src/basic-tag-configurator/BasicTagConfigurator.vue (5)
4-5: Prefer a stable key over indexUse the tag name as the key to avoid unnecessary re-renders after edits.
- <template v-for="(item, index) in tags" :key="index"> + <template v-for="(item, index) in tags" :key="item.name">
7-18: Improve a11y for edit input and errorExpose validity to AT and bind error description.
- <tiny-input + <tiny-input ref="editInputRef" v-model="editingName" size="small" :class="{ 'is-error': !!editErrorMessage }" + :aria-invalid="!!editErrorMessage" + :aria-describedby="editErrorMessage ? `edit-error-${index}` : undefined" v-bind="sanitizedInputProps" @keyup.enter="onEditConfirm" @blur="onEditConfirm" @keydown.esc="onEditCancel" /> - <div v-if="editErrorMessage" class="error-text">{{ editErrorMessage }}</div> + <div v-if="editErrorMessage" class="error-text" :id="`edit-error-${index}`">{{ editErrorMessage }}</div>
28-39: Improve a11y for add input and errorSame treatment for the add flow.
- <tiny-input + <tiny-input ref="addInputRef" v-model="addingName" size="small" :class="{ 'is-error': !!addErrorMessage }" + :aria-invalid="!!addErrorMessage" + :aria-describedby="addErrorMessage ? 'add-error' : undefined" v-bind="sanitizedInputProps" @keyup.enter="onAddConfirm" @blur="onAddConfirm" @keydown.esc="onAddCancel" /> - <div v-if="addErrorMessage" class="error-text">{{ addErrorMessage }}</div> + <div v-if="addErrorMessage" class="error-text" id="add-error">{{ addErrorMessage }}</div>
49-51: Clear errors while typingImport watch to reset inline errors on input.
-import { computed, nextTick, ref } from 'vue' +import { computed, nextTick, ref, watch } from 'vue'Then add (near refs):
watch(addingName, () => (addErrorMessage.value = '')) watch(editingName, () => (editErrorMessage.value = ''))
188-199: Select text on focus for faster editsMinor UX boost when entering edit mode.
nextTick(() => { try { const input = refEl?.value?.getInput ? refEl.value.getInput() : refEl?.value?.$el?.querySelector('input') if (typeof input?.focus === 'function') { input.focus() } + if (typeof input?.select === 'function') { + input.select() + } } catch (e) { // ignore } })packages/configurator/src/index.ts (1)
70-106: Public API expansion is fine; confirm if Meta aliases are required for backward-compat.*If consumers rely on the temporary
Meta*aliases for all configurators, consider adding aliases for the new components. If these are net-new with no legacy names, ignore.export { … VariableConfigurator, BasicTagConfigurator, ClassConfigurator, MetaCodeEditor, I18nInput as I18nConfigurator, MetaCodeEditor as CodeConfigurator, // 暂时保留Meta开头的旧组件名 ArrayItemConfigurator as MetaArrayItem, … TableColumnsConfigurator as MetaTableColumns, + // New components: add Meta* aliases only if maintaining legacy naming parity is desired + BasicTagConfigurator as MetaBasicTag, + ClassConfigurator as MetaClass }Also add these to any public docs or component palettes if applicable.
packages/design-core/registry.js (1)
131-133: Make Tailwind opt-in by default; confirm naming.Defaulting
enableTailWindCSSto true changes global behavior. Prefer false here and enable it in demos/configs. Also considerenableTailwindCSS(camelCase, brand casing) for consistency across code/docs.Apply:
- ], - enableTailWindCSS: true + ], + // Tailwind is opt-in; demos can override to true + enableTailWindCSS: falsepackages/vue-generator/src/templates/vue-template/templateFiles/src/main.js (2)
13-13: Defensive default for options.Avoids
Cannot read properties of undefinedif caller omits options.-export default (options) => { +export default (options = {}) => {
20-21: Terminate the conditional import.Minor style/readability; avoids linter complaints.
-${options.enableTailWindCSS ? 'import "./style.css"' : ''} +${options.enableTailWindCSS ? 'import "./style.css";' : ''}packages/vue-generator/src/templates/vue-template/templateFiles/genViteConfig.js (3)
1-1: Default options param.Prevents runtime errors when generator callers omit options.
-export default (schema, options) => { +export default (schema, options = {}) => {
10-10: Terminate injected import.Minor consistency with other imports.
- ${options.enableTailWindCSS ? 'import tailwindcss from "@tailwindcss/vite"' : ''} + ${options.enableTailWindCSS ? 'import tailwindcss from "@tailwindcss/vite";' : ''}
18-18: Avoid dangling comma when Tailwind is off.Generates cleaner output without
[vue(), vueJsx(), ].- plugins: [vue(), vueJsx(), ${options.enableTailWindCSS ? 'tailwindcss()' : ''}], + plugins: [vue(), vueJsx()${options.enableTailWindCSS ? ', tailwindcss()' : ''}],packages/common/js/import-map.json (1)
20-22: Add Tailwind browser mapping: double-check CDN asset path and versioning strategyLooks good. Please verify that
${VITE_CDN_DOMAIN}/@tailwindcss/browser${versionDelimiter}^4${fileDelimiter}/dist/index.global.jsresolves on your CDN and matches the expected v4 artifact name. If reproducibility matters, consider pinning to an exact version instead of^4.You can run a quick check in CI to assert the URL returns 200 for your configured CDN domain.
packages/canvas/init-canvas/canvas.html (1)
9-9: New hook: confirm CSS precedence with Tailwind’s injected stylesPlacing the Tailwind browser script here means its generated styles will likely be appended at the end of , potentially overriding previously linked styles. Please verify there’s no unintended precedence change (FOUC or overrides) in designer and preview. If needed, we can prepend or adjust order.
packages/canvas/init-canvas/init-canvas.ts (1)
4-13: Script injection pipeline: sanitize and mark non-blockingFunctionally correct. Two small hardening tweaks:
- Escape/validate each URL to avoid breaking attributes if a value contains quotes.
- Consider
deferfor non-module scripts to avoid blocking parsing (Tailwind still runs before MAIN_SCRIPT).Example patch:
-export function initCanvas(importMap = {}, importStyleUrls = [], importScripts = []) { +export function initCanvas(importMap = {}, importStyleUrls = [], importScripts: string[] = []) { return { html: canvasHtml .replace('<!--%IMPORT_MAP%-->', `<script type="importmap">${JSON.stringify(importMap, null, 2)}</script>`) .replace( '<!--%IMPORT_STYLE%-->', importStyleUrls.map((styleUrl) => `<link rel="stylesheet" crossorigin="" href="${styleUrl}">`).join('\n') ) - .replace('<!--%IMPORT_SCRIPT%-->', importScripts.map((script) => `<script src="${script}"></script>`).join('\n')) + .replace( + '<!--%IMPORT_SCRIPT%-->', + Array.from(new Set(importScripts)) + .map((src) => `<script src="${src.replace(/"/g, '"')}" defer></script>`) + .join('\n') + )packages/common/composable/generateCode/index.ts (2)
1-3: Dual import from dsl-vue: keep, but avoidanywhere possibleImport shape is fine. If circulars allow, prefer typed named imports for
parseRequiredBlocks/genSFCWithDefaultPluginto dropas any. Otherwise, add minimal typedefs to localizeany.Example:
-const { parseRequiredBlocks, genSFCWithDefaultPlugin } = dslVue as any +const { parseRequiredBlocks, genSFCWithDefaultPlugin } = dslVue as { + parseRequiredBlocks: (schema: any) => string[] + genSFCWithDefaultPlugin: (...args: any[]) => any +}
28-36: Preserve enableTailWindCSS when callers provide pluginConfigCurrent spread order allows
options.pluginConfig.templateto overwrite{ enableTailWindCSS }. Deep-merge to ensure the flag persists unless explicitly set by the caller.Patch:
- const instance = generateApp({ - ...defaultOptions, - pluginConfig: { - ...defaultOptions.pluginConfig, - template: { ...defaultOptions.pluginConfig.template, enableTailWindCSS } - }, - ...options - }) + const opt = options as any + const optPlugin = opt?.pluginConfig || {} + const instance = generateApp({ + ...defaultOptions, + ...options, + pluginConfig: { + ...defaultOptions.pluginConfig, + ...optPlugin, + template: { + ...defaultOptions.pluginConfig.template, + ...optPlugin.template, + enableTailWindCSS: optPlugin?.template?.enableTailWindCSS ?? !!enableTailWindCSS + } + } + })designer-demo/src/preview.js (1)
27-28: Avoid shallow-spreading engineConfig; pass it by reference.Spreading can drop non-enumerables/symbols and breaks identity. Use the object directly for consistency with docs and future extensibility.
Apply:
- 'engine.config': { - ...engineConfig - } + 'engine.config': engineConfigdocs/extension-capabilities-overview/new-registry.md (1)
281-288: Clarify default behavior in the example.Since the feature is “默认开启”, show disabling in the sample to reduce confusion and note that explicit true isn’t required.
Apply:
-// registry.js -export default { - 'engine.config': { - // ...其他配置 - enableTailWindCSS: true // 开启（默认即为 true）；设为 false 可关闭 - } -} +// registry.js +export default { + 'engine.config': { + // ...其他配置 + // 默认无需显式配置；仅在需要关闭时设置为 false + enableTailWindCSS: false + } +}packages/vue-generator/src/plugins/genTemplatePlugin.js (1)
7-35: Reduce duplicated function-handling branches.Two separate branches handle function templates. Consider normalizing to a single path to avoid drift.
If helpful, I can propose a small refactor that unifies the callable-path and string-key path.
packages/vue-generator/src/templates/vue-template/templateFiles/packageJson.js (1)
39-39: Minor: pretty-print and treat tailwind as a dev-only tool
- Pretty-print
package.json.- Tailwind is build-time; consider moving it to
devDependenciesto keep runtime lean.- return JSON.stringify(res) + return JSON.stringify(res, null, 2)Alternative (if you agree to move Tailwind):
- res.dependencies['tailwindcss'] = '^4.1.12' - res.devDependencies['@tailwindcss/vite'] = '^4.1.12' + res.devDependencies['tailwindcss'] = '^4.1.12' + res.devDependencies['@tailwindcss/vite'] = '^4.1.12'
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (24)
designer-demo/engine.config.js(1 hunks)designer-demo/src/preview.js(2 hunks)docs/extension-capabilities-overview/new-registry.md(1 hunks)packages/canvas/DesignCanvas/src/DesignCanvas.vue(1 hunks)packages/canvas/DesignCanvas/src/importMap.ts(1 hunks)packages/canvas/canvas.html(0 hunks)packages/canvas/init-canvas/canvas.html(1 hunks)packages/canvas/init-canvas/init-canvas.ts(1 hunks)packages/common/composable/generateCode/index.ts(2 hunks)packages/common/js/import-map.json(1 hunks)packages/configurator/src/basic-tag-configurator/BasicTagConfigurator.vue(1 hunks)packages/configurator/src/class-configurator/ClassConfigurator.vue(1 hunks)packages/configurator/src/index.ts(2 hunks)packages/design-core/registry.js(1 hunks)packages/design-core/src/preview/src/preview/generate.js(2 hunks)packages/design-core/src/preview/src/preview/importMap.js(0 hunks)packages/design-core/src/preview/src/preview/usePreviewData.ts(1 hunks)packages/plugins/materials/src/js/options.ts(1 hunks)packages/vue-generator/src/plugins/genTemplatePlugin.js(1 hunks)packages/vue-generator/src/templates/vue-template/index.js(6 hunks)packages/vue-generator/src/templates/vue-template/templateFiles/genViteConfig.js(2 hunks)packages/vue-generator/src/templates/vue-template/templateFiles/packageJson.js(2 hunks)packages/vue-generator/src/templates/vue-template/templateFiles/src/main.js(1 hunks)packages/vue-generator/src/templates/vue-template/templateFiles/src/style.css(1 hunks)
💤 Files with no reviewable changes (2)
- packages/design-core/src/preview/src/preview/importMap.js
- packages/canvas/canvas.html
🧰 Additional context used
🧠 Learnings (7)
📚 Learning: 2025-01-13T03:46:13.817Z
Learnt from: yy-wow
PR: opentiny/tiny-engine#940
File: packages/canvas/DesignCanvas/src/importMap.js:51-51
Timestamp: 2025-01-13T03:46:13.817Z
Learning: The `getImportMapData` function in `packages/canvas/DesignCanvas/src/importMap.js` has default parameter handling that initializes `canvasDeps` with empty arrays for `scripts` and `styles`, making additional null checks unnecessary.
Applied to files:
packages/canvas/DesignCanvas/src/DesignCanvas.vuepackages/canvas/DesignCanvas/src/importMap.tspackages/canvas/init-canvas/init-canvas.tspackages/canvas/init-canvas/canvas.html
📚 Learning: 2025-01-13T07:49:12.136Z
Learnt from: yy-wow
PR: opentiny/tiny-engine#940
File: packages/plugins/materials/src/composable/useMaterial.js:0-0
Timestamp: 2025-01-13T07:49:12.136Z
Learning: In the materials system, componentsDepsMap.scripts in materialState is used as a data store for tracking component dependencies and doesn't require Vue reactivity as changes are handled explicitly through updateCanvasDeps().
Applied to files:
packages/canvas/DesignCanvas/src/DesignCanvas.vue
📚 Learning: 2025-01-14T06:55:14.457Z
Learnt from: rhlin
PR: opentiny/tiny-engine#1011
File: packages/canvas/render/src/canvas-function/design-mode.ts:6-13
Timestamp: 2025-01-14T06:55:14.457Z
Learning: The code in `packages/canvas/render/src/canvas-function/design-mode.ts` is migrated code that should be preserved in its current form during the migration process. Refactoring suggestions for type safety and state management improvements should be considered in future PRs.
Applied to files:
packages/canvas/DesignCanvas/src/DesignCanvas.vue
📚 Learning: 2024-10-10T02:47:46.239Z
Learnt from: yy-wow
PR: opentiny/tiny-engine#850
File: packages/toolbars/preview/src/Main.vue:16-16
Timestamp: 2024-10-10T02:47:46.239Z
Learning: In `packages/toolbars/preview/src/Main.vue`, within the `preview` function, the `getMergeMeta` method is used at lines 64 and 65 to retrieve `engine.config` configurations.
Applied to files:
designer-demo/src/preview.js
📚 Learning: 2025-01-14T04:25:46.281Z
Learnt from: rhlin
PR: opentiny/tiny-engine#1011
File: packages/canvas/render/src/material-function/material-getter.ts:66-80
Timestamp: 2025-01-14T04:25:46.281Z
Learning: In the tiny-engine project, styles from block components are processed through Vite's CSS compilation pipeline, and additional style sanitization libraries should be avoided to maintain consistency with this approach.
Applied to files:
packages/common/js/import-map.json
📚 Learning: 2025-01-14T08:45:57.032Z
Learnt from: rhlin
PR: opentiny/tiny-engine#1011
File: packages/canvas/render/src/application-function/global-state.ts:12-25
Timestamp: 2025-01-14T08:45:57.032Z
Learning: The code in `packages/canvas/render/src/application-function/global-state.ts` is migrated from an existing codebase and should be handled with care when making modifications.
Applied to files:
packages/canvas/init-canvas/init-canvas.ts
📚 Learning: 2024-09-30T07:51:10.036Z
Learnt from: chilingling
PR: opentiny/tiny-engine#837
File: packages/vue-generator/src/plugins/genDependenciesPlugin.js:66-66
Timestamp: 2024-09-30T07:51:10.036Z
Learning: In the `tiny-engine` project, `opentiny/tiny-engine-dsl-vue` refers to the current package itself, and importing types from it may cause circular dependencies.
Applied to files:
packages/common/composable/generateCode/index.ts
🧬 Code graph analysis (9)
packages/design-core/src/preview/src/preview/generate.js (2)
packages/vue-generator/src/templates/vue-template/templateFiles/genViteConfig.js (1)
res(5-30)packages/vue-generator/src/templates/vue-template/templateFiles/packageJson.js (1)
res(5-32)
packages/vue-generator/src/templates/vue-template/templateFiles/packageJson.js (3)
packages/vue-generator/src/templates/vue-template/templateFiles/genViteConfig.js (2)
schema(1-33)res(5-30)packages/vue-generator/src/templates/vue-template/templateFiles/src/main.js (1)
options(13-26)packages/vue-generator/src/templates/vue-template/index.js (1)
res(84-168)
packages/vue-generator/src/plugins/genTemplatePlugin.js (4)
packages/vue-generator/src/generator/page.js (1)
template(355-355)packages/vue-generator/src/templates/vue-template/templateFiles/genViteConfig.js (1)
schema(1-33)packages/vue-generator/src/templates/vue-template/templateFiles/packageJson.js (1)
schema(2-40)packages/vue-generator/src/templates/vue-template/templateFiles/src/main.js (1)
options(13-26)
packages/vue-generator/src/templates/vue-template/templateFiles/genViteConfig.js (2)
packages/vue-generator/src/templates/vue-template/templateFiles/packageJson.js (1)
schema(2-40)packages/vue-generator/src/templates/vue-template/templateFiles/src/main.js (1)
options(13-26)
packages/design-core/src/preview/src/preview/usePreviewData.ts (2)
packages/register/src/common.ts (1)
getMergeMeta(53-55)packages/design-core/src/preview/src/preview/generate.js (2)
processAppJsCode(153-171)processAppJsCode(153-171)
packages/canvas/DesignCanvas/src/importMap.ts (1)
packages/register/src/common.ts (1)
getMergeMeta(53-55)
packages/canvas/init-canvas/init-canvas.ts (1)
packages/design-core/src/preview/src/preview/importMap.js (1)
importMap(16-16)
packages/vue-generator/src/templates/vue-template/index.js (3)
packages/vue-generator/src/templates/vue-template/templateFiles/genViteConfig.js (2)
schema(1-33)res(5-30)packages/vue-generator/src/templates/vue-template/templateFiles/packageJson.js (2)
schema(2-40)res(5-32)packages/vue-generator/src/templates/vue-template/templateFiles/src/main.js (1)
options(13-26)
packages/common/composable/generateCode/index.ts (4)
packages/vue-generator/src/index.d.ts (1)
IAppSchema(55-67)packages/vue-generator/src/templates/vue-template/templateFiles/src/main.js (1)
options(13-26)packages/register/src/common.ts (1)
getMergeMeta(53-55)packages/vue-generator/src/generator/generateApp.js (1)
generateApp(23-82)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: push-check
🔇 Additional comments (10)
packages/configurator/src/class-configurator/ClassConfigurator.vue (1)
63-74: Sanity-check Tailwind samples against completebuiltinRules
The current script only asserts/^\S+$/and never runs the start-character function rule. Update your test harness to apply both thepatternvalidator and the function rule frombuiltinRules, then verify that'2xl:text-gray-800'truly passes—or adjust the first-char rule to permit numeric prefixes if needed.Likely an incorrect or invalid review comment.
designer-demo/engine.config.js (1)
6-8: LGTM: demo exposes Tailwind flag.Keeps the sample focused and enables the feature in the demo environment.
packages/common/composable/generateCode/index.ts (2)
9-23: Expanded default pluginConfig: LGTMGood to predeclare all plugin buckets; keeps downstream merges predictable.
73-81: Safer handling of Promise.allSettled results: LGTMThe guard on
item.statusand presence ofblockItemprevents runtime errors when a block fetch fails.If block fetch API can return object instead of
[obj], add a fallback:-const blockItem = (item.value as any[])?.[0] +const blockItem = Array.isArray(item.value) ? item.value[0] : item.valuepackages/vue-generator/src/templates/vue-template/templateFiles/src/style.css (1)
1-1: LGTM — correct Tailwind v4 import.The single-line import is appropriate for Tailwind v4’s zero-config flow and matches the generator’s conditional inclusion.
packages/vue-generator/src/plugins/genTemplatePlugin.js (1)
28-34: Good: options forwarded to built-in templates.Passing
optionsinto template functions enables feature-flagged generation (e.g., Tailwind).packages/design-core/src/preview/src/preview/generate.js (1)
158-168: Verify desired injection order.Currently Tailwind loads after added CSS, which may override user styles. If you want user CSS to win, import Tailwind before
addCss(...). Otherwise ignore.I can adjust the order if you confirm which should take precedence in preview (Tailwind utilities vs. user overrides).
packages/design-core/src/preview/src/preview/usePreviewData.ts (1)
395-397: Import map entry for@tailwindcss/browseris already configured and loaded; no changes needed.packages/vue-generator/src/templates/vue-template/index.js (2)
7-7: LGTM: main.js templating now parameterizedImporting
main.jsas a function and passingoptionsis correct and aligns with conditional CSS injection.Also applies to: 118-118
95-95: LGTM: options propagated to template generatorsPassing
optionsinto Vite config and package.json generators matches the new Tailwind flag usage.Also applies to: 101-101
packages/vue-generator/src/templates/vue-template/templateFiles/packageJson.js
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/design-core/src/preview/src/previewDefaultRegistry.js(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: push-check
chilingling
force-pushed
the
feat/supportTailWindCSS
branch
from
011c186 to
6c62e75
Compare
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (2)
docs/extension-capabilities-overview/new-registry.md (1)
312-313: Typo fixed: “运行时渲染” wording LGTM.This addresses the earlier report.
packages/canvas/DesignCanvas/src/DesignCanvas.vue (1)
79-82: initCanvas signature mismatch — action requiredDesignCanvas usage is correct; packages/canvas/container/src/CanvasContainer.vue:265 still calls initCanvas({ emit, renderer: detail, iframe: iframe.value, controller: props.controller }) — update that call to initCanvas(importMap, importStyles, importScripts) or add backwards-compatibility in packages/canvas/init-canvas/init-canvas.ts (currently: export function initCanvas(importMap = {}, importStyleUrls = [], importScripts = [])).
🧹 Nitpick comments (3)
docs/extension-capabilities-overview/new-registry.md (1)
274-314: Tailwind section is clear; consider clarifying the default semantics.Docs say “默认开启”. In code, preview/build enablement should default to true unless explicitly set to false. Add a note like “未配置时视为开启（enableTailwindCSS !== false）” to match generator behavior and avoid ambiguity.
packages/vue-generator/src/templates/vue-template/templateFiles/packageJson.js (1)
34-37: Consider putting tailwindcss in devDependencies.Tailwind runs at build/dev time; placing it under devDependencies can better reflect intent and keep prod installs slimmer. Versions remain the same.
Apply:
- if (options?.enableTailwindCSS) { - res.dependencies['tailwindcss'] = '^4.1.12' - res.devDependencies['@tailwindcss/vite'] = '^4.1.12' - } + if (options?.enableTailwindCSS) { + res.devDependencies['tailwindcss'] = '^4.1.12' + res.devDependencies['@tailwindcss/vite'] = '^4.1.12' + }If you intentionally keep tailwindcss in dependencies to support production-only installs that still build at runtime, please confirm and we’ll align the docs accordingly.
packages/common/composable/generateCode/index.ts (1)
42-43: Avoid any-cast by importing symbols directly (optional).If circulars aren’t a concern, import { parseRequiredBlocks, genSFCWithDefaultPlugin } directly to keep types.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (25)
designer-demo/engine.config.js(1 hunks)designer-demo/src/preview.js(2 hunks)docs/extension-capabilities-overview/new-registry.md(1 hunks)packages/canvas/DesignCanvas/src/DesignCanvas.vue(1 hunks)packages/canvas/DesignCanvas/src/importMap.ts(1 hunks)packages/canvas/canvas.html(0 hunks)packages/canvas/init-canvas/canvas.html(1 hunks)packages/canvas/init-canvas/init-canvas.ts(1 hunks)packages/common/composable/generateCode/index.ts(2 hunks)packages/common/js/import-map.json(1 hunks)packages/configurator/src/basic-tag-configurator/BasicTagConfigurator.vue(1 hunks)packages/configurator/src/class-configurator/ClassConfigurator.vue(1 hunks)packages/configurator/src/index.ts(2 hunks)packages/design-core/registry.js(1 hunks)packages/design-core/src/preview/src/preview/generate.js(1 hunks)packages/design-core/src/preview/src/preview/importMap.js(0 hunks)packages/design-core/src/preview/src/preview/usePreviewData.ts(1 hunks)packages/design-core/src/preview/src/previewDefaultRegistry.js(1 hunks)packages/plugins/materials/src/js/options.ts(1 hunks)packages/vue-generator/src/plugins/genTemplatePlugin.js(1 hunks)packages/vue-generator/src/templates/vue-template/index.js(6 hunks)packages/vue-generator/src/templates/vue-template/templateFiles/genViteConfig.js(2 hunks)packages/vue-generator/src/templates/vue-template/templateFiles/packageJson.js(2 hunks)packages/vue-generator/src/templates/vue-template/templateFiles/src/main.js(1 hunks)packages/vue-generator/src/templates/vue-template/templateFiles/src/style.css(1 hunks)
💤 Files with no reviewable changes (2)
- packages/design-core/src/preview/src/preview/importMap.js
- packages/canvas/canvas.html
🚧 Files skipped from review as they are similar to previous changes (18)
- packages/vue-generator/src/templates/vue-template/templateFiles/src/style.css
- designer-demo/engine.config.js
- packages/configurator/src/index.ts
- packages/design-core/src/preview/src/previewDefaultRegistry.js
- designer-demo/src/preview.js
- packages/vue-generator/src/templates/vue-template/templateFiles/src/main.js
- packages/common/js/import-map.json
- packages/design-core/registry.js
- packages/plugins/materials/src/js/options.ts
- packages/configurator/src/basic-tag-configurator/BasicTagConfigurator.vue
- packages/canvas/DesignCanvas/src/importMap.ts
- packages/vue-generator/src/templates/vue-template/templateFiles/genViteConfig.js
- packages/vue-generator/src/plugins/genTemplatePlugin.js
- packages/canvas/init-canvas/canvas.html
- packages/canvas/init-canvas/init-canvas.ts
- packages/design-core/src/preview/src/preview/usePreviewData.ts
- packages/vue-generator/src/templates/vue-template/index.js
- packages/configurator/src/class-configurator/ClassConfigurator.vue
🧰 Additional context used
🧠 Learnings (4)
📚 Learning: 2025-01-13T03:46:13.817Z
Learnt from: yy-wow
PR: opentiny/tiny-engine#940
File: packages/canvas/DesignCanvas/src/importMap.js:51-51
Timestamp: 2025-01-13T03:46:13.817Z
Learning: The `getImportMapData` function in `packages/canvas/DesignCanvas/src/importMap.js` has default parameter handling that initializes `canvasDeps` with empty arrays for `scripts` and `styles`, making additional null checks unnecessary.
Applied to files:
packages/canvas/DesignCanvas/src/DesignCanvas.vue
📚 Learning: 2025-01-14T06:55:14.457Z
Learnt from: rhlin
PR: opentiny/tiny-engine#1011
File: packages/canvas/render/src/canvas-function/design-mode.ts:6-13
Timestamp: 2025-01-14T06:55:14.457Z
Learning: The code in `packages/canvas/render/src/canvas-function/design-mode.ts` is migrated code that should be preserved in its current form during the migration process. Refactoring suggestions for type safety and state management improvements should be considered in future PRs.
Applied to files:
packages/canvas/DesignCanvas/src/DesignCanvas.vue
📚 Learning: 2025-01-13T07:49:12.136Z
Learnt from: yy-wow
PR: opentiny/tiny-engine#940
File: packages/plugins/materials/src/composable/useMaterial.js:0-0
Timestamp: 2025-01-13T07:49:12.136Z
Learning: In the materials system, componentsDepsMap.scripts in materialState is used as a data store for tracking component dependencies and doesn't require Vue reactivity as changes are handled explicitly through updateCanvasDeps().
Applied to files:
packages/canvas/DesignCanvas/src/DesignCanvas.vue
📚 Learning: 2024-09-30T07:51:10.036Z
Learnt from: chilingling
PR: opentiny/tiny-engine#837
File: packages/vue-generator/src/plugins/genDependenciesPlugin.js:66-66
Timestamp: 2024-09-30T07:51:10.036Z
Learning: In the `tiny-engine` project, `opentiny/tiny-engine-dsl-vue` refers to the current package itself, and importing types from it may cause circular dependencies.
Applied to files:
packages/common/composable/generateCode/index.ts
🧬 Code graph analysis (3)
packages/vue-generator/src/templates/vue-template/templateFiles/packageJson.js (3)
packages/vue-generator/src/templates/vue-template/templateFiles/genViteConfig.js (2)
schema(1-33)res(5-30)packages/vue-generator/src/templates/vue-template/templateFiles/src/main.js (1)
options(13-26)packages/vue-generator/src/templates/vue-template/index.js (1)
res(84-168)
packages/design-core/src/preview/src/preview/generate.js (2)
packages/vue-generator/src/templates/vue-template/templateFiles/genViteConfig.js (1)
res(5-30)packages/vue-generator/src/templates/vue-template/templateFiles/packageJson.js (1)
res(5-32)
packages/common/composable/generateCode/index.ts (4)
packages/vue-generator/src/index.d.ts (1)
IAppSchema(55-67)packages/vue-generator/src/templates/vue-template/templateFiles/src/main.js (1)
options(13-26)packages/register/src/common.ts (1)
getMergeMeta(53-55)packages/vue-generator/src/generator/generateApp.js (1)
generateApp(23-82)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: push-check
🔇 Additional comments (5)
packages/vue-generator/src/templates/vue-template/templateFiles/packageJson.js (1)
2-2: Good guard on options default.Prevents runtime crash when options is omitted.
packages/design-core/src/preview/src/preview/generate.js (1)
156-162: CSS injection dedupe: LGTM.Avoids duplicate addCss calls while preserving order.
packages/common/composable/generateCode/index.ts (3)
1-3: Imports are fine; type-only keeps runtime clean.Dual import pattern is acceptable here.
9-17: Default pluginConfig scaffolding: LGTM.Clear separation of concerns and safe defaults.
21-23: parseSchema placeholder: LGTM.Keeps plugin chain explicit.
2 participants
English | 简体中文
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
Background and solution
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
New Components
Documentation
Style