Merge pull request #1962 from NullVoxPopuli/start-docs

Docs + <REPL> enhancements

Author: NullVoxPopuli

.prettierignore

@@ -3,7 +3,7 @@
 *.md
 *.json
 renovate.json5
-docs/
+public/docs/
 
 node_modules/
 dist/

apps/repl/.template-lintrc.cjs

@@ -7,13 +7,17 @@ module.exports = {
     {
       files: ['**/*.gts', '**/*.gjs'],
       rules: {
+        // eh
+        'no-inline-styles': 'off',
         // Handled by ESLint
         //   otherwise gives false negatives
         'no-implicit-this': 'off',
         // false negatives due to being defined in js-scope
         'no-curly-component-invocation': 'off',
         // Don't care
         'no-forbidden-elements': 'off',
+        // Incorrect, because it matches anything that looks like an arg, even if it's a string (intentionally)
+        'no-potential-path-strings': 'off',
       },
     },
     {

apps/repl/app/app.ts

@@ -1,14 +1,17 @@
-import 'limber-ui/theme.css';
 import 'ember-statechart-component';
 import './icons.ts';
 
-import Application from '@ember/application';
+import { isDevelopingApp, macroCondition } from '@embroider/macros';
 
-import Resolver from 'ember-resolver';
+import PageTitleService from 'ember-page-title/services/page-title';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore - no types
+import EmberResizeObserverService from 'ember-resize-observer-service/addon/services/resize-observer';
+import Application from 'ember-strict-application-resolver';
 
-import config from '#config';
+import '@nullvoxpopuli/limber-shared/theme.css';
 
-import { registry } from './registry.ts';
+import Router from './router.ts';
 
 // @babel/traverse (from babel-plugin-ember-template-imports)
 // accesses process.....
@@ -20,12 +23,36 @@ Object.assign(window, {
 });
 
 export default class App extends Application {
-  modulePrefix = config.modulePrefix;
-  Resolver = Resolver.withModules(registry);
-
-  // LOG_RESOLVER = true;
-  // LOG_ACTIVE_GENERATION = true;
-  // LOG_TRANSITIONS = true;
-  // LOG_TRANSITIONS_INTERNAL = true;
-  // LOG_VIEW_LOOKUPS = true;
+  modules = {
+    './router': Router,
+    ...import.meta.glob('./routes/{edit,index,application,error-404}.ts', { eager: true }),
+    ...import.meta.glob('./services/{editor,status}.ts', { eager: true }),
+    ...import.meta.glob('./controllers/*.ts', { eager: true }),
+    ...import.meta.glob('./templates/docs/*.gts', { eager: true }),
+    ...import.meta.glob('./templates/{application,edit,output,docs,error-404}.gts', {
+      eager: true,
+    }),
+
+    // /////////////////
+    // To Eliminate
+    // /////////////////
+
+    // Used by ember-container-query
+    './services/resize-observer': EmberResizeObserverService,
+
+    // /////////////////
+    // To keep
+    // /////////////////
+    './services/page-title': PageTitleService,
+  };
+}
+
+if (macroCondition(isDevelopingApp())) {
+  Object.assign(App, {
+    LOG_RESOLVER: true,
+    LOG_ACTIVE_GENERATION: true,
+    LOG_TRANSITIONS: true,
+    LOG_TRANSITIONS_INTERNAL: true,
+    LOG_VIEW_LOOKUPS: true,
+  });
 }

apps/repl/app/controllers/application.ts

@@ -33,15 +33,6 @@ export default class ApplicationController extends Controller {
      */
     'editor',
 
-    // Normally the editor will load automatically upon detecting
-    // activity -- this is to optimize page-load (as editors can be heavy
-    // when fully featured)
-    //
-    // when this is 'true', the user will have to click a button to start editing.
-    // This can be useful when limber is embedded for code samples on documentation sites
-    // where the primary use case is reading, rather than tinkering.
-    'noAutoEditor',
-
     // Normally the editor will load automatically upon detecting
     // activity -- this is to optimize page-load (as editors can be heavy
     // when fully featured)
@@ -50,6 +41,17 @@ export default class ApplicationController extends Controller {
     // requiring user interaction.
     'forceEditor',
 
+    // Determines how the editor should load.
+    // Normally the editor will load automatically upon detecting interaction activity. This is to optimize page-load as editors can be heavy when fully featured.
+    //
+    // When this is set to:
+    // - "force" - the editor will always load eagerly
+    // - "onclick" - the editor will only load when the user clicks that they want to edit
+    // - "never" - the editor is entirely disabled and the left-hand side is just a highlighted code snippet
+    //
+    //
+    'editorLoad',
+
     // This is the file format to use for the editor.
     //
     // Supported
@@ -72,5 +74,8 @@ export default class ApplicationController extends Controller {
     // Disable shiki highlighting on page load
     // this is primarily an optimization for tests
     'nohighlight',
+
+    // For dev only. When present, will tell certain components to use localhost
+    'local',
   ];
 }

apps/repl/app/languages.gts

@@ -203,7 +203,7 @@ export function formatQPFrom(x: string | undefined | null): FormatQP {
 
   assert(`Expected formatQP to be set`, x);
   assert(
-    `Expected ${x} to be one of ${Object.keys(languages).join(', ')}`,
+    `Expected ${JSON.stringify(x)} to be one of ${Object.keys(languages).join(', ')}`,
     Object.keys(languages).includes(x)
   );
 

apps/repl/app/modifiers/-utils/highlighting.ts

@@ -72,6 +72,7 @@ export async function getHighlighter(): Promise<HighlighterGeneric<never, never>
       import('shiki/langs/vue.mjs'),
       import('shiki/langs/jsx.mjs'),
       import('shiki/langs/mermaid.mjs'),
+      import('shiki/langs/bash.mjs'),
     ],
     langAlias: {
       gjs: 'glimmer-js',

apps/repl/app/modifiers/highlighted.ts

@@ -51,7 +51,9 @@ export default modifier<Signature>((element: Element, [code]) => {
       lang = 'markdown';
     }
 
-    if (!isAllowedFormat(lang)) {
+    const isAllowed = isAllowedFormat(lang) || lang === 'bash';
+
+    if (!isAllowed) {
       return;
     }
 

apps/repl/app/registry.ts

@@ -1,15 +1,45 @@
-import EmberRouter from '@embroider/router';
+import EmbroiderRouter from '@embroider/router';
 
 import { properLinks } from 'ember-primitives/proper-links';
 
 import config from '#config';
 
 @properLinks
-export default class Router extends EmberRouter {
+export default class Router extends EmbroiderRouter {
   location = config.locationType;
   rootURL = config.rootURL;
 }
 
+/**
+ * See: https://github.com/embroider-build/embroider/issues/2521
+ */
+function bundle(name: string, loader: () => Promise<{ default: unknown }>[]) {
+  return {
+    names: [name],
+    load: async () => {
+      const [template, route, controller] = await Promise.all(loader());
+      const slashName = name.replaceAll('.', '/');
+      const results: Record<string, unknown> = {};
+
+      if (template) results[`limber/templates/${slashName}`] = template.default;
+      if (route) results[`limber/routes/${slashName}`] = route.default;
+      if (controller) results[`limber/controllers/${slashName}`] = controller.default;
+
+      return {
+        default: results,
+      };
+    },
+  };
+}
+
+(window as any)._embroiderRouteBundles_ = [
+  bundle('docs', () => [import('./templates/docs.gts')]),
+  bundle('docs.repl-sdk', () => [import('./templates/docs/repl-sdk.gts')]),
+  bundle('docs.ember-repl', () => [import('./templates/docs/ember-repl.gts')]),
+  bundle('docs.embedding', () => [import('./templates/docs/embedding.gts')]),
+  bundle('docs.editor', () => [import('./templates/docs/editor.gts')]),
+];
+
 Router.map(function () {
   /**
    * The main editing UI is here
@@ -22,7 +52,12 @@ Router.map(function () {
    */
   this.route('ember');
   this.route('output');
-  // this.route('docs');
+  this.route('docs', function () {
+    this.route('repl-sdk');
+    this.route('ember-repl');
+    this.route('embedding');
+    this.route('editor');
+  });
 
-  this.route('error', { path: '*' });
+  this.route('error-404', { path: '*' });
 });

apps/repl/app/router.ts

@@ -46,10 +46,10 @@ export default class EditRoute extends Route {
 
     if (hasFileReference && hasFormat) {
       const format = formatQPFrom(qps.format as string);
+
       const response = await fetch(qps.file as string);
       const text = await response.text();
 
-      transition.abort();
       this.editor.fileURIComponent.set(text, format);
       await this.editor.fileURIComponent.flush();