Move docs to vite (#1019)

* Move docs to vite (run npx ember-vite-codemod@latest)

* Remove ember-code-snippet

* Drop ember-cli-sass

* Update packages

* Downgrade ember in docs

* Downgrade glint

Author: mkszepp

docs/.gitignore

@@ -1,3 +1,5 @@
+/tmp/
+
 # compiled output
 /dist/
 /declarations/

docs/app/app.ts

@@ -1,17 +1,19 @@
 import Application from '@ember/application';
 import Resolver from 'ember-resolver';
 import loadInitializers from 'ember-load-initializers';
-import config from 'docs/config/environment';
+import config from './config/environment';
 import { importSync, isDevelopingApp, macroCondition } from '@embroider/macros';
 
+import compatModules from '@embroider/virtual/compat-modules';
+
 if (macroCondition(isDevelopingApp())) {
   importSync('./deprecation-workflow');
 }
 
 export default class App extends Application {
   modulePrefix = config.modulePrefix;
   podModulePrefix = config.podModulePrefix;
-  Resolver = Resolver;
+  Resolver = Resolver.withModules(compatModules);
 }
 
-loadInitializers(App, config.modulePrefix);
+loadInitializers(App, config.modulePrefix, compatModules);

docs/app/components/code-block.gts

@@ -4,7 +4,7 @@ import CodeInline from './code-inline';
 interface CodeBlockSignature {
   Element: HTMLElement;
   Args: {
-    code: string;
+    fileName: string;
     language?: string;
   };
 }
@@ -17,7 +17,11 @@ export default class CodeBlock extends Component<CodeBlockSignature> {
   <template>
     <div class="code-block">
       {{~! ~}}
-      <CodeInline ...attributes @code={{@code}} @language={{@language}} />
+      <CodeInline
+        ...attributes
+        @fileName={{@fileName}}
+        @language={{@language}}
+      />
       {{~! ~}}
     </div>
   </template>

docs/app/components/code-example.gts

@@ -5,8 +5,6 @@ import { on } from '@ember/modifier';
 import { fn } from '@ember/helper';
 import { eq, and } from 'ember-truth-helpers';
 import CodeBlock from './code-block';
-// @ts-expect-error Could not find a declaration file for module 'ember-code-snippet'.
-import { getCodeSnippet } from 'ember-code-snippet';
 
 interface CodeExampleSignature {
   Element: HTMLElement;
@@ -99,35 +97,33 @@ export default class CodeExample extends Component<CodeExampleSignature> {
           >Result</div>
         {{/if}}
       </nav>
-      {{#if (and @glimmerTs (eq this.activeTab "glimmer-ts"))}}
-        {{#let (getCodeSnippet @glimmerTs) as |snippet|}}
-          <CodeBlock @language="gts" @code={{snippet.source}} />
-        {{/let}}
+      {{#if @glimmerTs}}
+        {{#if (eq this.activeTab "glimmer-ts")}}
+          <CodeBlock @language="gts" @fileName={{@glimmerTs}} />
+        {{/if}}
       {{/if}}
-      {{#if (and @hbs (eq this.activeTab "hbs"))}}
-        {{#let (getCodeSnippet @hbs) as |snippet|}}
-          <CodeBlock @language="handlebars" @code={{snippet.source}} />
-        {{/let}}
+      {{#if @hbs}}
+        {{#if (eq this.activeTab "hbs")}}
+          <CodeBlock @language="handlebars" @fileName={{@hbs}} />
+        {{/if}}
       {{/if}}
       {{#if @hbs2}}
-        {{#let (getCodeSnippet @hbs2) as |snippet|}}
-          <CodeBlock @language="handlebars" @code={{snippet.source}} />
-        {{/let}}
+        <CodeBlock @language="handlebars" @fileName={{@hbs2}} />
       {{/if}}
-      {{#if (and @js (eq this.activeTab "js"))}}
-        {{#let (getCodeSnippet @js) as |snippet|}}
-          <CodeBlock @language="js" @code={{snippet.source}} />
-        {{/let}}
+      {{#if @js}}
+        {{#if (eq this.activeTab "js")}}
+          <CodeBlock @language="js" @fileName={{@js}} />
+        {{/if}}
       {{/if}}
-      {{#if (and @scss (eq this.activeTab "scss"))}}
-        {{#let (getCodeSnippet @scss) as |snippet|}}
-          <CodeBlock @language="scss" @code={{snippet.source}} />
-        {{/let}}
+      {{#if @scss}}
+        {{#if (eq this.activeTab "scss")}}
+          <CodeBlock @language="scss" @fileName={{@scss}} />
+        {{/if}}
       {{/if}}
-      {{#if (and @css (eq this.activeTab "css"))}}
-        {{#let (getCodeSnippet @css) as |snippet|}}
-          <CodeBlock @language="css" @code={{snippet.source}} />
-        {{/let}}
+      {{#if @css}}
+        {{#if (eq this.activeTab "css")}}
+          <CodeBlock @language="css" @fileName={{@css}} />
+        {{/if}}
       {{/if}}
       {{#if (and this.showResult (has-block))}}
         <div

docs/app/components/code-inline.gts

@@ -2,32 +2,32 @@ import Component from '@glimmer/component';
 import { modifier } from 'ember-modifier';
 import { htmlSafe, type SafeString } from '@ember/template';
 import { tracked } from '@glimmer/tracking';
-import { assert } from '@ember/debug';
 import { codeToHtml } from 'shiki';
 import { task } from 'ember-concurrency';
 
+const files = import.meta.glob('./snippets/*', {
+  query: '?raw',
+  import: 'default',
+}) as Record<string, () => Promise<string>>;
+
+async function loadSnippet(name: string) {
+  const path = `./snippets/${name}` as const;
+  const loader = files[path];
+  if (!loader) throw new Error(`File not found: ${path}`);
+  return await loader();
+}
+
 interface CodeInlineSignature {
   Element: HTMLElement;
   Args: {
-    code: string;
+    fileName: string;
     language?: string;
   };
 }
 
 export default class CodeInline extends Component<CodeInlineSignature> {
   @tracked prismCode: string | SafeString = '';
 
-  get code() {
-    const code = this.args.code;
-
-    assert(
-      "ember-prism's <CodeBlock/> and <CodeInline/> components require a `code` parameter to be passed in.",
-      code !== undefined,
-    );
-
-    return code;
-  }
-
   get language() {
     return this.args.language ?? 'markup';
   }
@@ -37,9 +37,10 @@ export default class CodeInline extends Component<CodeInlineSignature> {
   });
 
   generateCode = task(async () => {
-    const code = this.code;
     const language = this.language;
 
+    const code = await loadSnippet(this.args.fileName);
+
     const htmlCode = await codeToHtml(code, {
       lang: language,
       theme: 'github-light-default',

docs/app/config/environment.d.ts

@@ -0,0 +1,33 @@
+import loadConfigFromMeta from '@embroider/config-meta-loader';
+import { assert } from '@ember/debug';
+
+const config = loadConfigFromMeta('docs') as unknown;
+
+assert(
+  'config is not an object',
+  typeof config === 'object' && config !== null,
+);
+assert(
+  'modulePrefix was not detected on your config',
+  'modulePrefix' in config && typeof config.modulePrefix === 'string',
+);
+assert(
+  'locationType was not detected on your config',
+  'locationType' in config && typeof config.locationType === 'string',
+);
+assert(
+  'rootURL was not detected on your config',
+  'rootURL' in config && typeof config.rootURL === 'string',
+);
+assert(
+  'APP was not detected on your config',
+  'APP' in config && typeof config.APP === 'object',
+);
+
+export default config as {
+  modulePrefix: string;
+  podModulePrefix?: string;
+  locationType: string;
+  rootURL: string;
+  APP: Record<string, unknown>;
+} & Record<string, unknown>;

docs/app/config/environment.ts

@@ -0,0 +1,50 @@
+const {
+  babelCompatSupport,
+  templateCompatSupport,
+} = require('@embroider/compat/babel');
+
+module.exports = {
+  plugins: [
+    [
+      '@babel/plugin-transform-typescript',
+      {
+        allExtensions: true,
+        onlyRemoveTypeImports: true,
+        allowDeclareFields: true,
+      },
+    ],
+    [
+      'babel-plugin-ember-template-compilation',
+      {
+        compilerPath: 'ember-source/dist/ember-template-compiler.js',
+        enableLegacyModules: [
+          'ember-cli-htmlbars',
+          'ember-cli-htmlbars-inline-precompile',
+          'htmlbars-inline-precompile',
+        ],
+        transforms: [...templateCompatSupport()],
+      },
+    ],
+    [
+      'module:decorator-transforms',
+      {
+        runtime: {
+          import: require.resolve('decorator-transforms/runtime-esm'),
+        },
+      },
+    ],
+    [
+      '@babel/plugin-transform-runtime',
+      {
+        absoluteRuntime: __dirname,
+        useESModules: true,
+        regenerator: false,
+      },
+    ],
+    ...babelCompatSupport(),
+  ],
+
+  generatorOpts: {
+    compact: false,
+  },
+};

docs/babel.config.cjs

@@ -1,11 +1,13 @@
 'use strict';
-
 const EmberApp = require('ember-cli/lib/broccoli/ember-app');
 
-module.exports = function (defaults) {
+const { compatBuild } = require('@embroider/compat');
+
+module.exports = async function (defaults) {
+  const { buildOnce } = await import('@embroider/vite');
+
   const app = new EmberApp(defaults, {
     'ember-cli-babel': { enableTypeScriptTransform: true },
-    snippetPaths: ['app/components/snippets'],
     autoImport: {
       watchDependencies: ['ember-basic-dropdown'],
     },
@@ -16,6 +18,5 @@ module.exports = function (defaults) {
     },
   });
 
-  const { maybeEmbroider } = require('@embroider/test-setup');
-  return maybeEmbroider(app);
+  return compatBuild(app, buildOnce);
 };

docs/ember-cli-build.js

@@ -30,15 +30,6 @@ const parserOptions = {
     js: {
       ecmaFeatures: { modules: true },
       ecmaVersion: 'latest',
-      requireConfigFile: false,
-      babelOptions: {
-        plugins: [
-          [
-            '@babel/plugin-proposal-decorators',
-            { decoratorsBeforeExport: true },
-          ],
-        ],
-      },
     },
     ts: {
       projectService: true,