Skip to content

Commit

Permalink
Merge pull request #12 from forman/refactor-demo
Browse files Browse the repository at this point in the history
Refactor demo
  • Loading branch information
forman authored Nov 13, 2023
2 parents d9d8c48 + a4d9154 commit 3115ea4
Show file tree
Hide file tree
Showing 29 changed files with 420 additions and 341 deletions.
4 changes: 3 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
```

Expand Down
44 changes: 0 additions & 44 deletions src/demo/AvailableExtensions.tsx

This file was deleted.

101 changes: 0 additions & 101 deletions src/demo/app-store.ts

This file was deleted.

File renamed without changes.
13 changes: 8 additions & 5 deletions src/demo/App.tsx → src/demo/app/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<>
Expand Down
37 changes: 37 additions & 0 deletions src/demo/app/init.ts
Original file line number Diff line number Diff line change
@@ -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));
}
32 changes: 32 additions & 0 deletions src/demo/app/store.ts
Original file line number Diff line number Diff line change
@@ -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);
}
37 changes: 37 additions & 0 deletions src/demo/components/ApiLink.tsx
Original file line number Diff line number Diff line change
@@ -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;
67 changes: 67 additions & 0 deletions src/demo/components/AvailableExtensions.tsx
Original file line number Diff line number Diff line change
@@ -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;
Original file line number Diff line number Diff line change
Expand Up @@ -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());
Expand All @@ -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) => (
Expand Down
Loading

0 comments on commit 3115ea4

Please sign in to comment.