Merge pull request #12 from forman/refactor-demo

Refactor demo

README.md

@@ -352,7 +352,9 @@ You can use `.env` files, e.g., `.env.local` to configure development options:
 NODE_ENV=development
 
 # Set the library's log level (ALL, DEBUG, INFO, WARN, ERROR, OFF)
-# Logging is OFF by default.
+# Logging is OFF by default. 
+# Note, if the level is not set or it is OFF, no console outputs 
+# are suppressed while unit tests are run.
 VITE_LOG_LEVEL=ALL
 ```
 

src/demo/App.tsx → src/demo/app/App.tsx

@@ -4,14 +4,17 @@
  * https://opensource.org/licenses/MIT.
  */
 
-import AvailableExtensions from "./AvailableExtensions";
-import InstalledExtensions from "./InstalledExtensions";
-import CommandPalette from "./CommandPalette";
-import ViewContainer from "./ViewContainer";
-import MainMenu from "./MainMenu";
+import AvailableExtensions from "../components/AvailableExtensions";
+import InstalledExtensions from "../components/InstalledExtensions";
+import CommandPalette from "../components/CommandPalette";
+import ViewContainer from "../components/ViewContainer";
+import MainMenu from "../components/MainMenu";
+import { initApp } from "./init";
 
 import "./App.css";
 
+initApp();
+
 function App() {
   return (
     <>

src/demo/app/init.ts

@@ -0,0 +1,37 @@
+/*
+ * Copyright © 2023 Norman Fomferra
+ * Permissions are hereby granted under the terms of the MIT License:
+ * https://opensource.org/licenses/MIT.
+ */
+
+import {
+  type ExtensionContext,
+  activateExtension,
+  getExtensionId,
+  registerExtension,
+} from "@/core";
+import { registerCommand, registerContributionPoints } from "@/contrib";
+import { selectView, clearView } from "./store";
+
+// The app's manifest.
+import appManifest from "../package.json";
+
+function activate(ctx: ExtensionContext) {
+  // Register app-level commands
+  ctx.subscriptions.push(registerCommand("app.selectView", selectView));
+  ctx.subscriptions.push(registerCommand("app.clearView", clearView));
+}
+
+export function initApp() {
+  // log.setLevel(log.LogLevel.OFF);
+
+  // Register a number of app-level contribution points
+  registerContributionPoints();
+  // Register the app as "extension" so its own contributions
+  // in package.json are recognized.
+  registerExtension(appManifest, {
+    module: { activate },
+  });
+  // Activate the application
+  void activateExtension(getExtensionId(appManifest));
+}

src/demo/app/store.ts

@@ -0,0 +1,32 @@
+/*
+ * Copyright © 2023 Norman Fomferra
+ * Permissions are hereby granted under the terms of the MIT License:
+ * https://opensource.org/licenses/MIT.
+ */
+
+import { create } from "zustand";
+
+export interface AppState {
+  viewId: string | null;
+}
+
+export interface AppMethods {
+  selectView(viewId: string | null): void;
+}
+
+export const useAppStore = create<AppState & AppMethods>()((set) => ({
+  viewId: null,
+  selectView: (viewId: string | null) => set({ viewId }),
+}));
+
+export function useAppContext(): Record<string, unknown> {
+  return useAppStore() as unknown as Record<string, unknown>;
+}
+
+export function selectView(viewId: string | null) {
+  useAppStore.getState().selectView(viewId);
+}
+
+export function clearView() {
+  useAppStore.getState().selectView(null);
+}

src/demo/components/ApiLink.tsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright © 2023 Norman Fomferra
+ * Permissions are hereby granted under the terms of the MIT License:
+ * https://opensource.org/licenses/MIT.
+ */
+
+interface ApiLinkProps {
+  type?:
+    | "classes "
+    | "functions"
+    | "interfaces"
+    | "modules"
+    | "types"
+    | "variables";
+  module?: string;
+  name: string;
+  text?: string;
+}
+
+const baseUrl = "https://forman.github.io/extendit";
+
+export function ApiLink({ type, module, name, text }: ApiLinkProps) {
+  const href = [
+    baseUrl,
+    type ?? "functions",
+    `${module ?? "core"}.${name}.html`,
+  ].join("/");
+  return (
+    <code>
+      <a href={href} target="_blank">
+        {text ?? name}
+      </a>
+    </code>
+  );
+}
+
+export default ApiLink;

src/demo/components/AvailableExtensions.tsx

@@ -0,0 +1,67 @@
+/*
+ * Copyright © 2023 Norman Fomferra
+ * Permissions are hereby granted under the terms of the MIT License:
+ * https://opensource.org/licenses/MIT.
+ */
+
+import {
+  getExtensionDisplayName,
+  getExtensionId,
+  registerExtension,
+} from "@/core";
+import { useExtensions } from "@/react";
+
+import type { ExtensionManifest } from "@/core";
+
+import manifest1 from "../extensions/my-extension-1/package.json";
+import manifest2 from "../extensions/my-extension-2/package.json";
+import manifest3 from "../extensions/my-extension-3/package.json";
+import ApiLink from "./ApiLink";
+
+const availableExtensions: [string, ExtensionManifest][] = [
+  ["my-extension-1", manifest1],
+  ["my-extension-2", manifest2],
+  ["my-extension-3", manifest3],
+];
+
+const extensionsPath = "/src/demo/extensions";
+
+function AvailableExtensions() {
+  const extensions = useExtensions();
+
+  function hasExtension(id: string) {
+    return Boolean(extensions.find((e) => e.id === id));
+  }
+
+  return (
+    <div className="row2-item">
+      <h1>Available Extensions</h1>
+      <p>
+        Click to install an extension. Installing means registering an extension
+        in the application using the <ApiLink name="registerExtension" />{" "}
+        function.
+      </p>
+      <div className="button-bar">
+        {availableExtensions.map(([extPath, manifest]) => {
+          return (
+            <button
+              key={getExtensionId(manifest)}
+              disabled={hasExtension(getExtensionId(manifest))}
+              onClick={() =>
+                registerExtension(manifest, {
+                  pathResolver: (path) =>
+                    `${extensionsPath}/${extPath}/${path}`,
+                })
+              }
+              type="button"
+            >
+              {getExtensionDisplayName(manifest)}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export default AvailableExtensions;

src/demo/CommandPalette.tsx → src/demo/components/CommandPalette.tsx

@@ -4,9 +4,9 @@
  * https://opensource.org/licenses/MIT.
  */
 
-import { executeCommand } from "@/contrib";
-import { useCommandPalette } from "@/contrib/command-palette";
-import { useAppContext } from "./app-store";
+import { executeCommand, useCommandPalette } from "@/contrib";
+import { useAppContext } from "../app/store";
+import ApiLink from "./ApiLink";
 
 function CommandPalette() {
   const menuItems = useCommandPalette(useAppContext());
@@ -15,10 +15,22 @@ function CommandPalette() {
     <div className="row2-item">
       <h1>Command Palette</h1>
       <p>
-        Shows all available commands of the <code>commands</code> contribution
-        point, except those removed by <code>when</code>-clauses in items of the{" "}
-        <code>commandPalette</code> menu of the <code>menus</code> contribution
-        point.
+        Shows all available commands of the{" "}
+        <ApiLink
+          module="contrib"
+          type="variables"
+          name="commandsPoint"
+          text="commands"
+        />{" "}
+        contribution point, except those removed by <code>when</code>-clauses in
+        items of the <code>commandPalette</code> menu of the{" "}
+        <ApiLink
+          module="contrib"
+          type="variables"
+          name="menusPoint"
+          text="menus"
+        />{" "}
+        contribution point.
       </p>
       <div className="button-bar">
         {menuItems.map((menuItem) => (