Widget <unstable-xgo-code-editor> by nighca · Pull Request #3089 · goplus/builder

nighca · 2026-04-28T00:59:40Z

Refs #3066

Summary

extract reusable widget/app bootstrap setup so custom-element widgets can initialize UI, i18n, query, and app state consistently
add a local widget dev entry plus Vite widget entries for spx-runner and the new unstable-xgo-code-editor bundle
implement the unstable-xgo-code-editor widget with minimal initialization using xgo-code-editor, backed by SpxProject and SpxLSPClient
wire the widget editor to use the spx document-base definitions, support switching among project code files, and fix hover behavior inside the custom-element shadow DOM
simplify widget-facing editor and runner UI with Tailwind utility classes and shared loading/error components

Notes

unstable-xgo-code-editor is currently a demo-oriented widget and loads a fixed project internally to get the embedding flow working first
the widget reuses spx-side project/LSP capabilities as the minimal backend needed by xgo-code-editor, without pulling in the full editor-specific business layer
the widget is not production-ready yet; remaining work mainly includes:
- public API design
- generalizing the language server beyond the current SPX-backed implementation
- migrating internal subcomponent styles such as UITextInput to Tailwind or another packaging-safe approach
- validating the widget in staging and production environments

Tests

npx vite build --mode development

fennoai

Overall this is a well-structured refactor. Extracting bootstrap logic into setup.ts, the shadow-DOM mouseleave fix, and the ?url → new URL(…, import.meta.url).href migration are all clean improvements. A few issues worth addressing before marking production-ready.

cn0809 · 2026-05-09T07:17:39Z

        height: 100%;
      }
-
-      @layer theme, base, components, utilities;


layer 优先级声明还是应该放这里，放到 app.css 的话，生产环境打包后有的 split CSS chunk 会缺失 layer 顺序导致混乱，之前遇到过这个问题 296ad01

看了下 vercel 环境确实也是有问题的

为啥往 spx-gui/src/components/ui/index.ts 这里加一下就能解决问题来着？是因为所有 @layer components 的使用都以这个文件为入口吗

生产环境打包后有的 split CSS chunk 会缺失 layer 顺序导致混乱

是因为部分 UI component 的 CSS 在 tailwind 产出的那份 CSS 之前添加到页面上了？

是因为部分 UI component 的 CSS 在 tailwind 产出的那份 CSS 之前添加到页面上了？

看起来是的

为啥往 spx-gui/src/components/ui/index.ts 这里加一下就能解决问题来着？是因为所有 @layer components 的使用都以这个文件为入口吗

这里是组件库的入口，组件库里用了 @layer components，除了组件库也就 global.css app.css 用了 @layer，业务组件里没用 @layer 所以没出问题吧

简单了解了下，这个应该是 vite 8 的缺陷，有个相关 issue；从这个 issue 的情况看，在 spx-gui/src/components/ui/index.ts 这里加能解决问题是偶然的，最可靠的还是在最外边（比如 index.html 中）加；所以按这个方式先改了下（ a942a81 ），预期 vite 的那个 issue 修复后我们可以把 layer 顺序声明集中到 app.css 中

* chore(deps): bump spx to 2.0.0 (#3127) Agent-Logs-Url: https://github.com/goplus/builder/sessions/147d2d8e-4bf8-4ae7-b66e-b8a41c970f3a Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: nighca <1492263+nighca@users.noreply.github.com> * Widget `<unstable-xgo-code-editor>` (#3089) * Add widget `<unstable-xgo-code-editor>` * Address widget review feedback * Stabilize layer order workarounds * Provide SPX knowledge from frontend (#3097) * UI update for tutorial pages (#3122) * update tutorial pages styles * compress tutorials banner * refine tutorials banner layout * show updated time for course series * details * Handle invalid image stalls in editor (#3136) * feat: add title attribute to sprite name in list items (#3140) * feat: add title attribute to sprite name in list items Add HTML title attribute to the sprite name span in UIEditorSpriteItem so users can hover to see the full name when it is truncated. Generated with [codeagent](https://github.com/qbox/codeagent) Co-authored-by: nighca <1492263+nighca@users.noreply.github.com> * refactor: move title tooltip to UIBlockItemTitle component Add optional `title` prop to UIBlockItemTitle and forward it to the inner truncation span, then use it in UIEditorSpriteItem to avoid the extra wrapper span. Generated with [codeagent](https://github.com/qbox/codeagent) Co-authored-by: nighca <1492263+nighca@users.noreply.github.com> * feat: add title attribute to name in all block item components Add :title="name" to UIBlockItemTitle in UIEditorBackdropItem, UIEditorSoundItem, UIEditorWidgetItem, and UISpriteItem so truncated names show a hover tooltip consistently across all item panels. Generated with [codeagent](https://github.com/qbox/codeagent) Co-authored-by: nighca <1492263+nighca@users.noreply.github.com> * feat: add title attribute to sprite name in list items Add :title="name" to UIBlockItemTitle in UISoundItem and UIBackdropItem. Generated with [codeagent](https://github.com/qbox/codeagent) Co-authored-by: nighca <1492263+nighca@users.noreply.github.com> * refactor: make title prop required in UIBlockItemTitle Change title from optional to required prop to ensure all callers provide a tooltip value for truncated text. Generated with [codeagent](https://github.com/qbox/codeagent) Co-authored-by: nighca <1492263+nighca@users.noreply.github.com> * feat: add title attribute to sprite name in list items Add missing :title prop to all UIBlockItemTitle callers to satisfy the newly-required title prop: AnimationGenItem, BackdropGenItem, ParamSelector, CostumeGenItem, SpriteGenItem, SpxEffectKindItem, and the ui-design docs page. Generated with [codeagent](https://github.com/qbox/codeagent) Co-authored-by: nighca <1492263+nighca@users.noreply.github.com> * fix: use $t() instead of t() in ParamSelector template Replace t(item.label) with $t(item.label) in the :title binding to be consistent with the template-level i18n helper usage. Generated with [codeagent](https://github.com/qbox/codeagent) Co-authored-by: nighca <1492263+nighca@users.noreply.github.com> * style: fix formatting in CostumeGenItem.vue Run Prettier to fix line-length formatting issue flagged by CI. Generated with [codeagent](https://github.com/qbox/codeagent) Co-authored-by: nighca <1492263+nighca@users.noreply.github.com> --------- Co-authored-by: xgopilot <noreply@goplus.org> Co-authored-by: nighca <1492263+nighca@users.noreply.github.com> * feat(code-editor): support sprite instance input helpers (#3123) Handle `spx-sprite-instance` with the existing resource input helper so sprite instance slots can use the sprite resource selector. Write selected sprite instances as bare identifiers while keeping resource name slots as string literals. Fixes #3110 Updates goplus/xgolsw#317 Signed-off-by: Aofei Sheng <aofei@aofeisheng.com> * Update UI empty/error default images (#3134) * update ui empty/error default images * compress svg size * rename image * adjust svg size * chore(deps): bump github.com/goplus/xgolsw to 0.20.0 in /tools/spxls (#3163) Signed-off-by: Aofei Sheng <aofei@aofeisheng.com> * feat(spx-gui): optimize video cut preview during animation generation (#3150) * optimize video cut preview during animation generation * use css variables for track padding * fix details * remove page for test * optimize code * queue video seeks to keep animation preview responsive during dragging --------- Signed-off-by: Aofei Sheng <aofei@aofeisheng.com> Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com> Co-authored-by: nighca <1492263+nighca@users.noreply.github.com> Co-authored-by: chennan <chennan@qiniu.com> Co-authored-by: fennoai[bot] <231223108+fennoai[bot]@users.noreply.github.com> Co-authored-by: xgopilot <noreply@goplus.org> Co-authored-by: Aofei Sheng <aofei@aofeisheng.com>

vercel Bot deployed to Preview – builder April 28, 2026 01:01 View deployment

This comment was marked as outdated.

Sign in to view

nighca force-pushed the issue-3066 branch from 1a2d97a to 9e84ca4 Compare May 8, 2026 01:02

nighca changed the title ~~Document xgo code editor widget plan~~ Widget <xgo-code-editor> May 8, 2026

vercel Bot deployed to Preview – builder May 8, 2026 01:05 View deployment

Add widget <unstable-xgo-code-editor>

e0d1102

nighca force-pushed the issue-3066 branch from 9e84ca4 to e0d1102 Compare May 9, 2026 01:14

vercel Bot deployed to Preview – builder May 9, 2026 01:16 View deployment

nighca changed the title ~~Widget <xgo-code-editor>~~ Widget <unstable-xgo-code-editor> May 9, 2026

nighca marked this pull request as ready for review May 9, 2026 01:19

fennoai Bot reviewed May 9, 2026

View reviewed changes

Address widget review feedback

b0439be

vercel Bot deployed to Preview – builder May 9, 2026 04:06 View deployment

cn0809 reviewed May 9, 2026

View reviewed changes

Stabilize layer order workarounds

a942a81

vercel Bot deployed to Preview – builder May 9, 2026 09:04 View deployment

cn0809 approved these changes May 9, 2026

View reviewed changes

nighca merged commit 6f723c1 into goplus:dev May 9, 2026
4 checks passed

nighca mentioned this pull request May 9, 2026

Provide an external xgo-code-editor widget for embedders #3066

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Widget <unstable-xgo-code-editor>#3089

Widget <unstable-xgo-code-editor>#3089
nighca merged 3 commits into
goplus:devfrom
nighca:issue-3066

nighca commented Apr 28, 2026 •

edited

Loading

Uh oh!

This comment was marked as outdated.

Uh oh!

fennoai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cn0809 May 9, 2026

Uh oh!

nighca May 9, 2026

Uh oh!

nighca May 9, 2026

Uh oh!

cn0809 May 9, 2026

Uh oh!

nighca May 9, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

nighca commented Apr 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Notes

Tests

Uh oh!

This comment was marked as outdated.

Uh oh!

fennoai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cn0809 May 9, 2026

Choose a reason for hiding this comment

Uh oh!

nighca May 9, 2026

Choose a reason for hiding this comment

Uh oh!

nighca May 9, 2026

Choose a reason for hiding this comment

Uh oh!

cn0809 May 9, 2026

Choose a reason for hiding this comment

Uh oh!

nighca May 9, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

nighca commented Apr 28, 2026 •

edited

Loading