Convert to v2 addon#547
Conversation
✅ Deploy Preview for ember-styleguide ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
nice try bot, but the CSS is borked |
package.json
Outdated
| "ember-concurrency": "^4.0.0", | ||
| "ember-truth-helpers": "^3.0.0" | ||
| }, | ||
| "peerDependencies": { |
README.md
Outdated
| Import the addon's styles in your app's CSS (e.g., `app/styles/app.css`): | ||
|
|
||
| ```css | ||
| @import 'ember-styleguide/styles/styles.css'; |
There was a problem hiding this comment.
let's change this to ember-styleguide/styles.css
rollup.config.mjs
Outdated
| 'services/**/*.js', | ||
| ]), | ||
| addon.dependencies(), | ||
| resolveGjsExtensions(), |
There was a problem hiding this comment.
remove this plugin -- all src code should use file extensions in their imports
rollup.config.mjs
Outdated
| babelHelpers: 'inline', | ||
| configFile: babelPublishConfig, | ||
| }), | ||
| restoreTemplateImportBindings(), |
There was a problem hiding this comment.
remove this plugin as well -- it is not needed when importing with extensions
This converts the addon from the classic v1 Ember addon format to the
v2 addon format using @embroider/addon-dev and @embroider/addon-shim.
Key changes:
- Move source from addon/ to src/ directory
- Remove app/ re-exports (now auto-generated by rollup appReexports)
- Remove v1 index.js, replaced by addon-main.cjs using @embroider/addon-shim
- Add rollup.config.mjs for building the addon with @embroider/addon-dev
- Add babel.config.cjs with decorator-transforms
- Add postcss.config.cjs and postcss build step for CSS bundling
- Update package.json with v2 addon format (ember-addon.version: 2),
exports field, files field, public-assets mapping
- Update .npmignore to include dist/ in published package
- Remove v1-specific dependencies (broccoli-funnel, broccoli-merge-trees,
ember-cli-postcss, static-postcss-addon-tree, ember-named-blocks-polyfill)
- Add v2 addon dependencies (@embroider/addon-shim, decorator-transforms)
- Add build tooling devDependencies (@embroider/addon-dev, @rollup/plugin-babel,
rollup, postcss, postcss-cli, postcss-import, postcss-preset-env)
Breaking changes:
- The contentFor('head') hook that injected font preload link tags has been
removed. Consuming apps should add font preloading themselves.
- CSS is now available as a pre-built bundle at
ember-styleguide/styles/ember-styleguide.css
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Fix v2 addon build, strict-mode SVG conflict, CSS loading, and test failures
- Fix SVG <g> element in es-sidebar.gjs conflicting with decorator-transforms
runtime's `g` import in strict-mode template scope, which caused Ember to
treat the SVG group element as a component invocation of `decorateFieldV2`
- Simplify addon-main.cjs included hook to delegate to the shim's original
included() instead of manually replicating its internals
- Add CSS vendor tree injection in ember-cli-build.js for self-testing, since
the addon-main.cjs hooks don't run when the addon IS the top-level project
- Configure decorator-transforms babel plugin with import-based runtime for
v2 addon compatibility
- Add restoreTemplateImportBindings rollup plugin to restore template-used
imports that rollup tree-shakes away (on, eq, and, didInsert, willDestroy)
- Update @embroider/addon-dev to ^8.3.0 for GJS support
- Update tests to use angle-bracket component invocation and DOM selectors
instead of deprecated this.element references
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add babel-plugin-ember-template-compilation for ember-source 5.x compat
The gjs() rollup plugin converts <template> tags to JS, but without
the template compilation babel plugin, it outputs runtime template()
calls from @ember/template-compiler (ember 6.x+ only).
Adding babel-plugin-ember-template-compilation to the babel config
compiles templates ahead-of-time using precompileTemplate/createTemplateFactory
which is compatible with ember-source 5.x.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Fix dependencies: @ember/test-waiters and ember-concurrency versions
- Replace ember-test-waiters@^2 with @ember/test-waiters@^4 (scoped name)
- Update ember-concurrency to ^4.0.0
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Restore docs build for Netlify, split build scripts
- build: runs both addon and docs builds (for Netlify)
- build:addon: rollup + postcss for the v2 addon dist
- build:docs: bottled-ember docs site (same as original)
- prepack: only builds addon (not docs)
- start: concurrently runs addon watch + docs serve
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace bottled-ember with ember build for demo app
Use the standard ember-cli test/dummy app as the demo site:
- build:demo uses `ember build --environment=production`
- start:demo uses `ember serve`
- Remove bottled-ember dependency
- Remove test:docs (docs tests were bottled-ember specific)
The dummy app in tests/dummy/ serves as both the test harness
and the Netlify deploy preview, consistent with the addon
blueprint's test-app pattern.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace ember-cli with vite for demo/test app using @ember/addon-blueprint pattern
- Create demo-app/ with app.gts, templates/application.gts, and styles.css
using ember-strict-application-resolver
- Add vite.config.mjs with @embroider/vite ember() and hbs() plugins
- Add root index.html for the demo app entry point
- Update tests/test-helper.js to use ember-strict-application-resolver
with routes needed by acceptance tests (basicy, slow, fancy)
- Update tests/index.html to use vite module imports
- Rename testem.js to testem.cjs, serve from dist-tests
- Remove ember-cli-build.js, tests/dummy/, and config/ directories
- Update package.json scripts: start uses vite dev, test uses vite build
+ testem, build uses rollup + postcss (addon only)
- Upgrade to ember-source 6.x, ember-qunit 9.x, @ember/test-helpers 5.x
for @embroider/vite compatibility
- Add vite, testem, @embroider/vite, @embroider/core, @embroider/macros,
ember-strict-application-resolver to devDependencies
- Remove ember-cli and related ember-cli-* packages from devDependencies
- Add vite resolve aliases for v1 addon dependencies
(@ember/render-modifiers, ember-truth-helpers)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Restructure to addon-blueprint pattern: vite demo-app, fix tests
- Replace ember-cli with vite for demo/test app
- Create demo-app/ with app.gts, templates/application.gts, styles.css
- Add vite.config.mjs for dev server and test builds
- Split babel configs: babel.config.cjs (dev/test with macros) and
babel.publish.config.cjs (addon publishing without macros)
- Register all addon components in test-helper for integration tests
- Remove tests/dummy/, ember-cli-build.js, bottled-ember
- Tests: 15/27 pass (remaining failures: service injection in es-header/es-sidebar)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Simplify addon-main.cjs, rename CSS, fix build scripts
- addon-main.cjs: use default @embroider/addon-shim (no custom hooks)
- Rename CSS output: dist/styles/styles.css (consumers import
'ember-styleguide/styles/styles.css')
- Scripts:
- build: vite build (demo app for Netlify)
- build:styleguide: rollup + postcss (addon publishing)
- prepack: build:styleguide
- Remove broccoli-funnel dependency
- Update README with CSS import instructions
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Address PR feedback: remove plugins, add extensions, fix CSS path
- Remove peerDependencies (not needed for v2 addons)
- Rename CSS: ember-styleguide/styles.css (was styles/styles.css)
- Remove resolveGjsExtensions rollup plugin
- Remove restoreTemplateImportBindings rollup plugin
- Add .gjs/.js extensions to all relative imports in src/
- Simplify package.json exports
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add netlify.toml for pnpm support
Netlify needs corepack to use pnpm. Build runs addon build first
(build:styleguide) then demo app (build) which outputs to dist/.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Update lockfile
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Build out demo app with component showcase
Demo page now shows all components with descriptions and live
examples, sidebar navigation, and responsive layout. Matches
the spirit of the existing docs site at ember-styleguide.netlify.app.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Fix demo app rendering errors
- Fix es-header-navbar-link: @Tracked linkType = this.args.link.type
crashes because this.args is undefined in field initializers. Changed
to a getter that reads this.args.link?.type directly.
- Fix demo template: use valid icon names (book-icon, guides, pencil-icon)
instead of unsupported ones (download, ember, cog)
Demo app now renders fully: header, all component sections, footer.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add full docs site with all pages from original site
- Add route-based docs with sidebar navigation matching original site
- Component docs: Banner, Button, Card, Footer, Header, Link Card,
Note, Pagination, Progress Bar, Sidebar (with live examples and API tables)
- Concept docs: Accessibility, Background Shapes, Central Content,
Colors (with swatches), Header Anchor, Layout, Typography, Wells
- CSS docs: Overview, Global, Helpers
- Fix self-referencing: vite alias maps 'ember-styleguide' → './dist'
- Demo app outputs to dist-demo/ (keeps addon dist/ separate)
- Netlify publishes dist-demo/
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Fix docs page errors: convert component demos to .gts with explicit imports
Pages that render addon components (banner, button, card, link-card,
note, pagination) were .hbs loose-mode templates that couldn't resolve
the components. Converted to .gts strict-mode templates with explicit
imports from ember-styleguide/components/*.
Also make docs-layout full-width (remove max-width).
All 17 routes now render without errors.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Sync demo-app templates with original docs content
Fill in all missing content from the original docs/ markdown files into
the demo-app templates: additional code examples, descriptions, API
details, accessibility notes, and usage guidance. Convert sidebar.hbs
to sidebar.gts with explicit EsSidebar import. Add three missing concept
pages (markdown, on-this-page, table-of-contents) with routes and
sidebar navigation links. Update colors to match original CSS variable
values.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add ColorPallet component with AA/AAA contrast checking
The colors page now shows each color with:
- Color swatch with name, CSS variable, optional class name
- HEX and RGB values
- AA/AAA contrast badges for dark and light text at 5 size levels
(SM, Base, MD, LG, XL) with proper WCAG thresholds
(4.5:1 AA / 7:1 AAA normal text, 3:1 AA / 4.5:1 AAA large text)
- Green pass / red fail indicators
Matches the original site's ColorPallet component functionality.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Sync remaining demo-app templates with original deployed site content
- accessibility: add missing "Code Guide" subheading, remove extra paragraph
- markdown: add missing Images and Code Blocks sections
- css/global: match original heading structure and description text
- index: restore full original content (website lists, goals, contributing)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Match original ColorPallet layout: text samples with AA/AAA scores
Rewrite ColorPallet to visually match the original deployed site:
- Shows "A" characters at 5 real text sizes on each color background
- Two rows: dark text (default body color) and light text (.text-light)
- Score labels: AAA✓, AA✓, or FAIL (matching WCAG thresholds)
- Uses actual ember-styleguide CSS colors (#42474F dark, #F4F6F8 light)
- Details section below with Name, Variable, Class Name, RGB, HEX
- Uses same CSS class names as original (field-guide-color-pallet, etc.)
- Layout uses ember-styleguide's layout/lg:col-2 grid like original
- Scores match the deployed site exactly (verified Brand + White swatches)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add syntax highlighting for code blocks using shiki
All <pre><code> blocks across the docs site now get syntax highlighting
via shiki with the github-dark theme. Uses a SyntaxHighlight wrapper
component with MutationObserver to auto-highlight on route transitions.
Language detection is heuristic-based (handlebars, javascript, html,
css, bash). Shiki is loaded async for code-splitting.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Fix code block border/background artifacts
The addon CSS applies border and background to code:not([class*="language-"])
which affects <code> inside shiki-highlighted <pre> blocks. Override with
.shiki code { background: none; border: none; } to remove the artifacts.
Also match the fallback pre background (#24292e) to shiki's github-dark
theme so there's no flash of different color before highlighting loads.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Fix demo-app template heading structures to match original markdown docs
Remove extra h2/h3 headings that were added to demo-app templates but
don't exist in the original docs. Each template now uses exactly the
same heading hierarchy as its corresponding markdown file in docs/.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Restore footer.hbs template with corrected heading structure
The previous commit accidentally emptied this file. Recreate it with
only the headings that exist in the original docs/components/footer.md.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add live rendered component examples to all demo-app doc pages
Convert footer, header, and progress-bar pages from .hbs to .gts so
they can render addon components live. Add missing live examples for
sidebar (full-width variants), button (onClicked and accessibility),
background-shapes (boxes-bottom, swipe-top, swipe-bottom), wells
(ratios and figure/anchor), and CSS helpers (responsive video,
hide-on-mobile). Every handlebars example from the original docs now
has both a live rendered component and a source code block.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Fix all demo-app templates to match original markdown exactly
Remove docs-example wrappers, restore full untruncated text content,
match heading levels, CSS classes, and code blocks to the original
markdown documentation. Live rendered examples now produce identical
HTML to what the code blocks show.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Fix colors page layout: add ...attributes to ColorPallet component
The ColorPallet component wasn't passing through ...attributes, so
class="lg:col-2" from the template was being dropped. This caused
the pallets to stack vertically instead of using the ember-styleguide
layout grid (3 per row) like the original site.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add SPA fallback redirect for Netlify
All routes redirect to /index.html so client-side routing handles
navigation after page refresh.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Match original color pallet CSS exactly
Copy the exact CSS rules from the deployed site:
- max-width: 400px on pallet card
- height: 65px, line-height: 65px on text samples
- Score badges: monospace font, #1c1e24 bg, #f4f6f8 text, 4px radius
- Details section: min-height 250px, #ebeef2 background, 1.5rem padding
- Details titles: #8f949f color, uppercase, 0.9rem font size
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace duplicate templates with kolay-powered .gjs.md markdown docs
Adds kolay as the markdown-to-page converter so .gjs.md files are the
single source of truth. This removes the manually re-implemented .gts/.hbs
templates that duplicated the original markdown content.
- Install kolay, ember-primitives, @shikijs/rehype
- Configure kolay vite plugin with build-time shiki (dual light/dark themes)
- Replace 25+ explicit routes with kolay's addRoutes wildcard routing
- Add @properLinks for client-side navigation from markdown <a> tags
- Convert all docs to .gjs.md with hbs/gjs live codefences for interactive demos
- Add meta.jsonc files for page ordering
- Remove runtime syntax-highlight component (shiki now runs at build time)
- Delete docs/ directory (content moved to demo-app/templates/)
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Update Netlify Node version to 24 for fs/promises glob support
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Fix kolay page discovery by adding groups config
Kolay's default glob only searches {app,src}/templates/ but this
project uses demo-app/templates/. Add an explicit groups entry
pointing at the correct directory so pages are discovered.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Fix page discovery: add app/templates symlink for kolay convention
Kolay's default glob hardcodes {app,src}/templates/ but our files are
in demo-app/templates/. A symlink from app/templates -> demo-app/templates
lets the default glob find files, producing a single "Home" group with
all pages. Previously the groups config created a duplicate empty group
that shadowed the real one.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Fix: exclude .gjs.md from Ember resolver glob
The import.meta.glob in app.gts was including .gjs.md files in the
Ember strict resolver's module map, causing "no component manager"
errors. These files are loaded by kolay's <Page> component, not the
Ember resolver. Exclude .gjs.md from the glob pattern.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Upgrade ember-source to 6.12.0-beta.3
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Deduplicate deps: pin @glimmer/component, override ember-primitives
Multiple copies of @glimmer/component (1.1.2 + 2.0.0) and
ember-primitives (0.51, 0.53, 0.55) caused component manager
registration mismatches. Pin @glimmer/component to 2.0.0 and add
pnpm overrides to force single copies.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Migrate all live demos from hbs to gjs format
Convert all `hbs live` codefences to `gjs live` with explicit imports.
The gjs format produces proper component modules with setComponentTemplate
+ templateOnly() wrapping, whereas hbs live blocks were missing the
component manager association.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Add preview flag to all live code fences
Adds 'preview' to the meta line of all gjs live code fences so that
the source code is displayed underneath the rendered component demos.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Fix code block styling for kolay live demos
- Enable light-dark() CSS function via color-scheme: light dark
- Style .repl-sdk__demo containers with gray background and border
- Connect demo and code snippet visually (top/bottom border radius)
- Add fallback styles for non-shiki pre blocks
- Remove margin on pre.shiki inside snippets for seamless connection
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Remove preview flag from colors page live demos
The color palette demos don't benefit from showing their source code
underneath since the implementation details (loops, hash helpers) are
not useful as documentation examples.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Fix home page: use Ember template for index instead of kolay
Kolay's manifest doesn't include top-level index files in the group's
page list, so the index.gjs.md content was never found. Use a regular
.gts template for the index route instead, which renders the
Introduction page content directly.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Make website URLs clickable links on the home page
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Fix null reference in EsHeaderNavbarLink dropdown focus
processFirstElementFocus could throw when the dropdown DOM hasn't
rendered yet (e.g. programmatic clicks with event.detail=0). Guard
with optional chaining to prevent crashing the Ember runloop.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Fix dropdown setup by using didInsert instead of schedule('afterRender')
The dropdown list DOM wasn't present when schedule('afterRender') fired,
causing null reference errors on addEventListener/focus calls. Move all
dropdown setup (blur listeners, keyboard focus, keydown handler) into a
didInsert modifier on the <ul> element itself, guaranteeing the DOM
exists. Also properly tear down the keydown listener on willDestroy and
remove the broken unregisterListener that referenced a non-existent
triggerDropdown method.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Make expanded tracked
Add @embroider/legacy-inspector-support and fix dropdown focus handling
- Add @embroider/legacy-inspector-support to enable Ember Inspector
- Rewrite dropdown focus handling: use focusout with requestAnimationFrame
to check document.activeElement instead of blur with next(), preventing
the dropdown from closing immediately after opening
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Remove embroider/compat
Fix service deprecation
Upgrade more deps
progress
Simplify
5f427a2 to
d7d35a2
Compare
|
@NullVoxPopuli please stop prompting the AI to do this in a massive PR This is going to be converted in very small incremental steps following this philosophy https://mainmatter.com/blog/2021/05/26/keeping-a-clean-git-history/ |
|
All the recent cammits are actually me (see no co-author) This is draft. And a spike - exploratory work. |
Components were imported but not added to the ember-strict-application-resolver modules map, causing Glimmer VM to fail with null component resolution. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The acceptance test needed application and index templates (previously in the v1 dummy app) to render the progress bar and route links. Also imports the addon CSS so component visibility assertions work correctly. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
the exploration here is in prep for the ember-website to go compatless (more steps needed ofc, but primarily we can't have v1 addons z) |
|
you're butting up against a strategy point that has been a core value of the Learning team for quite some time now. We should not be maintaining apps that go outside the default experience of Ember devs too much, so that means that the Ember website should not go compatless until it becomes the default for |

Summary
addon/tosrc/directory, removes manualapp/re-exportsindex.jswithaddon-main.cjsusing@embroider/addon-shim@embroider/addon-devfor JS/GJS compilation andpostcss-clifor CSS bundlingpackage.jsonwith"ember-addon": { "version": 2 }, properexportsfield,filesfield, andpublic-assetsmapping for fonts/imagesBreaking changes
contentFor('head')hook that injected font preload<link>tags has been removed. Consuming apps should add font preloading themselves.ember-styleguide/styles/ember-styleguide.cssexplicitly depending on their build pipeline.Test plan
pnpm buildsucceeds, producing compiled JS indist/components/,dist/services/,dist/constants/appReexportsgenerates correct re-exports indist/_app_/for all components and servicesdist/styles/ember-styleguide.csswith all imports resolved (including normalize.css from node_modules)ember-addon.public-assetspnpm test:emberto verify existing tests pass with the v2 addon format🤖 Generated with Claude Code