Skip to content

Commit

Permalink
Initial migration to Lit
Browse files Browse the repository at this point in the history
  • Loading branch information
sleepyfran committed Aug 30, 2024
1 parent 7a30195 commit 5e85697
Show file tree
Hide file tree
Showing 39 changed files with 630 additions and 505 deletions.
8 changes: 2 additions & 6 deletions .eslintrc.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ module.exports = {
extends: [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:react-hooks/recommended",
"plugin:import/recommended",
"plugin:import/typescript",
"plugin:wc/recommended",
"plugin:lit/recommended",
],
ignorePatterns: ["dist", ".eslintrc.cjs"],
parser: "@typescript-eslint/parser",
plugins: ["react-refresh"],
settings: {
"import/extensions": [".ts", ".tsx"],
"import/resolver": {
Expand All @@ -19,10 +19,6 @@ module.exports = {
},
},
rules: {
"react-refresh/only-export-components": [
"warn",
{ allowConstantExport: true },
],
"@typescript-eslint/no-unused-vars": [
"error",
{
Expand Down
9 changes: 3 additions & 6 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,17 @@
},
"dependencies": {
"@effect/schema": "^0.71.1",
"effect": "^3.6.5",
"react": "^18.2.0",
"react-dom": "^18.2.0"
"effect": "^3.6.5"
},
"devDependencies": {
"@rollup/plugin-inject": "^5.0.5",
"@typescript-eslint/eslint-plugin": "^7.2.0",
"@typescript-eslint/parser": "^7.2.0",
"@vitejs/plugin-react-swc": "^3.5.0",
"eslint": "^8.57.0",
"eslint-import-resolver-typescript": "^3.6.1",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.6",
"eslint-plugin-lit": "^1.14.0",
"eslint-plugin-wc": "^2.1.1",
"husky": "~9.0.11",
"plop": "^4.0.1",
"prettier": "^3.2.5",
Expand Down
2 changes: 1 addition & 1 deletion packages/components/add-provider/index.ts
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export * from "./src/AddProvider";
export * from "./src/add-provider";
16 changes: 6 additions & 10 deletions packages/components/add-provider/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,15 @@
"private": true,
"version": "1.0.0",
"scripts": {
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"lint": "eslint . --ext ts --report-unused-disable-directives --max-warnings 0",
"typecheck": "tsc --noEmit"
},
"dependencies": {
"@echo/core-types": "^1.0.0",
"@echo/services-bootstrap": "^1.0.0",
"@echo/services-add-provider-workflow": "^1.0.0",
"@effect-rx/rx": "^0.33.8",
"@effect-rx/rx-react": "^0.30.11",
"effect": "^3.6.5"
},
"devDependencies": {
"@types/react": "^18.2.66",
"@types/react-dom": "^18.2.22"
"@echo/components-provider-status": "^1.0.0",
"@echo/services-bootstrap-runtime": "^1.0.0",
"effect": "^3.6.5",
"lit": "^3.2.0",
"@lit/task": "^1.0.1"
}
}
117 changes: 0 additions & 117 deletions packages/components/add-provider/src/AddProvider.tsx

This file was deleted.

78 changes: 78 additions & 0 deletions packages/components/add-provider/src/add-provider.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import {
AddProviderWorkflow,
type FolderMetadata,
type ProviderMetadata,
} from "@echo/core-types";
import { Task } from "@lit/task";
import { LitElement, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { getOrCreateRuntime } from "@echo/services-bootstrap-runtime";
import type { ProviderLoadedEvent } from "./provider-loader";
import "@echo/components-provider-status";
import "./provider-loader";
import "./select-root";

type ProviderStatus =
| { _tag: "LoadingProviders" }
| { _tag: "ProvidersLoaded"; availableProviders: ProviderMetadata[] }
| { _tag: "WaitingForRootFolderSelection"; folders: FolderMetadata[] }
| { _tag: "ProviderStarted" };

/**
* Component that displays a list of providers that can be added to the application
* and allows the user to select one.
*/
@customElement("add-provider")
export class AddProvider extends LitElement {
@property()
private _providerStatus: ProviderStatus = { _tag: "LoadingProviders" };

// @ts-expect-error "Task executes automatically"
private _availableProvidersTask = new Task(this, {
task: () =>
getOrCreateRuntime()
.runPromise(AddProviderWorkflow.availableProviders)
.then((availableProviders) => {
this._providerStatus = {
_tag: "ProvidersLoaded",
availableProviders,
};
}),
args: () => [],
});

render() {
return this._providerStatus._tag === "LoadingProviders"
? html`<h1>Loading providers...</h1>`
: this._providerStatus._tag === "ProvidersLoaded"
? html`<provider-loader
.availableProviders=${this._providerStatus.availableProviders}
@provider-loaded=${this._onProviderLoaded}
></provider-loader>`
: this._providerStatus._tag === "WaitingForRootFolderSelection"
? html`<select-root
.availableFolders=${this._providerStatus.folders}
@root-selected=${this._onRootSelected}
></select-root>`
: html`<provider-status></provider-status>`;
}

private _onProviderLoaded(event: ProviderLoadedEvent) {
this._providerStatus = {
_tag: "WaitingForRootFolderSelection",
folders: event.availableFolders,
};
}

private _onRootSelected() {
this._providerStatus = {
_tag: "ProviderStarted",
};
}
}

declare global {
interface HTMLElementTagNameMap {
"add-provider": AddProvider;
}
}
80 changes: 80 additions & 0 deletions packages/components/add-provider/src/provider-loader.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import {
AddProviderWorkflow,
type FolderMetadata,
type ProviderMetadata,
} from "@echo/core-types";
import { getOrCreateRuntime } from "@echo/services-bootstrap-runtime";
import { Task } from "@lit/task";
import { LitElement, html } from "lit";
import { customElement, property } from "lit/decorators.js";

/**
* Event that gets dispatched by the component when the provider has been loaded
* and is awaiting root folder selection.
*/
export class ProviderLoadedEvent extends Event {
constructor(public availableFolders: FolderMetadata[]) {
super("provider-loaded", { bubbles: true, composed: true });
}
}

/**
* Component that displays a list of available providers and loads them upon selection.
*/
@customElement("provider-loader")
export class ProviderLoader extends LitElement {
@property({ type: Array })
availableProviders: ProviderMetadata[] = [];

private _loadProvider = new Task(this, {
task: ([provider]: [ProviderMetadata]) =>
getOrCreateRuntime().runPromise(
AddProviderWorkflow.loadProvider(provider),
),
autoRun: false,
});

private _connectToProvider = new Task(this, {
task: () =>
getOrCreateRuntime().runPromise(AddProviderWorkflow.connectToProvider()),
autoRun: false,
});

// @ts-expect-error "Task executes automatically"
private _notifyProviderLoaded = new Task(this, {
args: () => [this._connectToProvider.value],
task: ([rootFolder]) => {
if (rootFolder) {
this.dispatchEvent(new ProviderLoadedEvent(rootFolder));
}
},
});

render() {
return this._connectToProvider.render({
initial: () =>
this._loadProvider.render({
initial: () =>
this.availableProviders.map(
(provider) => html`
<button @click=${() => this._loadProvider.run([provider])}>
${provider.id}
</button>
`,
),
complete: (providerMetadata) =>
html`<button @click="${() => this._connectToProvider.run()}">
Connect to ${providerMetadata.id}
</button>`,
}),
pending: () => html`<h1>Connecting...</h1>`,
complete: () => html`<h1>Connected!</h1>`,
});
}
}

declare global {
interface HTMLElementTagNameMap {
"provider-loader": ProviderLoader;
}
}
Loading

0 comments on commit 5e85697

Please sign in to comment.