p-sw/pswui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: fix errors with biomejs

Browse Source
This commit is contained in:
p-sw 2024-06-29 22:33:52 +09:00
parent 8e9b178f5e
commit 4d33e78454
18 changed files with 595 additions and 410 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/cli/.mocharc.json
View File

@ -1,10 +1,6 @@
{ {
"require": [ "require": ["ts-node/register"],
"ts-node/register" "watch-extensions": ["ts"],
],
"watch-extensions": [
"ts"
],
"recursive": true, "recursive": true,
"reporter": "spec", "reporter": "spec",
"timeout": 60000, "timeout": 60000,

4
packages/cli/bin/dev.js
View File

@ -1,6 +1,6 @@
#!/usr/bin/env -S node --loader ts-node/esm --no-warnings=ExperimentalWarning #!/usr/bin/env -S node --loader ts-node/esm --no-warnings=ExperimentalWarning
// eslint-disable-next-line n/shebang // eslint-disable-next-line n/shebang
import {execute} from '@oclif/core' import { execute } from "@oclif/core";
await execute({development: true, dir: import.meta.url}) await execute({ development: true, dir: import.meta.url });

4
packages/cli/bin/run.js
View File

@ -1,5 +1,5 @@
#!/usr/bin/env node #!/usr/bin/env node
import {execute} from '@oclif/core' import { execute } from "@oclif/core";
await execute({dir: import.meta.url}) await execute({ dir: import.meta.url });

310
packages/cli/src/commands/add.tsx
View File

@ -1,36 +1,43 @@
import {Args, Command, Flags} from '@oclif/core' import { existsSync } from "node:fs";
import {loadConfig, validateConfig} from '../helpers/config.js' import { mkdir, writeFile } from "node:fs/promises";
import {existsSync} from 'node:fs' import { join } from "node:path";
import {mkdir, writeFile} from 'node:fs/promises' import { Args, Command, Flags } from "@oclif/core";
import {join} from 'node:path' import { colorize } from "@oclif/core/ux";
import {getComponentURL, getDirComponentURL, getRegistry} from '../helpers/registry.js' import { Box, render } from "ink";
import ora from 'ora' import ora from "ora";
import React, {ComponentPropsWithoutRef} from 'react' import React, { type ComponentPropsWithoutRef } from "react";
import {render, Box} from 'ink' import { Choice } from "../components/Choice.js";
import {SearchBox} from '../components/SearchBox.js' import { SearchBox } from "../components/SearchBox.js";
import {getDirComponentRequiredFiles, checkComponentInstalled} from '../helpers/path.js' import { loadConfig, validateConfig } from "../helpers/config.js";
import {Choice} from '../components/Choice.js' import {
import {colorize} from '@oclif/core/ux' checkComponentInstalled,
import {safeFetch} from '../helpers/safe-fetcher.js' getDirComponentRequiredFiles,
} from "../helpers/path.js";
import {
getComponentURL,
getDirComponentURL,
getRegistry,
} from "../helpers/registry.js";
import { safeFetch } from "../helpers/safe-fetcher.js";
function Generator() { function Generator() {
let complete: boolean = false let complete = false;
function ComponentSelector<T extends {displayName: string; key: string; installed: boolean}>( function ComponentSelector<
props: Omit<ComponentPropsWithoutRef<typeof SearchBox<T>>, 'helper'>, T extends { displayName: string; key: string; installed: boolean },
) { >(props: Omit<ComponentPropsWithoutRef<typeof SearchBox<T>>, "helper">) {
return ( return (
<Box> <Box>
<SearchBox <SearchBox
helper={'Press Enter to select component.'} helper={"Press Enter to select component."}
{...props} {...props}
onSubmit={(value) => { onSubmit={(value) => {
complete = true complete = true;
props.onSubmit?.(value) props.onSubmit?.(value);
}} }}
/> />
</Box> </Box>
) );
} }
return [ return [
@ -38,29 +45,31 @@ function Generator() {
new Promise<void>((r) => { new Promise<void>((r) => {
const i = setInterval(() => { const i = setInterval(() => {
if (complete) { if (complete) {
r() r();
clearInterval(i) clearInterval(i);
} }
}, 100) }, 100);
}), }),
] as const ] as const;
} }
function Generator2() { function Generator2() {
let complete = false let complete = false;
function ForceSelector({onComplete}: {onComplete: (value: 'yes' | 'no') => void}) { function ForceSelector({
onComplete,
}: { onComplete: (value: "yes" | "no") => void }) {
return ( return (
<Choice <Choice
question={'You already installed this component. Overwrite?'} question={"You already installed this component. Overwrite?"}
yes={'Yes, overwrite existing file and install it.'} yes={"Yes, overwrite existing file and install it."}
no={'No, cancel the action.'} no={"No, cancel the action."}
onSubmit={(value) => { onSubmit={(value) => {
complete = true complete = true;
onComplete(value) onComplete(value);
}} }}
/> />
) );
} }
return [ return [
@ -68,190 +77,237 @@ function Generator2() {
new Promise<void>((r) => { new Promise<void>((r) => {
const i = setInterval(() => { const i = setInterval(() => {
if (complete) { if (complete) {
r() r();
clearInterval(i) clearInterval(i);
} }
}, 100) }, 100);
}), }),
] as const ] as const;
} }
export default class Add extends Command { export default class Add extends Command {
static override args = { static override args = {
name: Args.string({description: 'name of component to install'}), name: Args.string({ description: "name of component to install" }),
} };
static override description = 'Add a component to the project.' static override description = "Add a component to the project.";
static override examples = ['<%= config.bin %> <%= command.id %>'] static override examples = ["<%= config.bin %> <%= command.id %>"];
static override flags = { static override flags = {
branch: Flags.string({char: 'r', description: 'use other branch instead of main'}), branch: Flags.string({
force: Flags.boolean({char: 'f', description: 'override the existing file'}), char: "r",
config: Flags.string({char: 'p', description: 'path to config'}), description: "use other branch instead of main",
shared: Flags.string({char: 's', description: 'place for installation of shared.ts'}), }),
components: Flags.string({char: 'c', description: 'place for installation of components'}), force: Flags.boolean({
} char: "f",
description: "override the existing file",
}),
config: Flags.string({ char: "p", description: "path to config" }),
shared: Flags.string({
char: "s",
description: "place for installation of shared.ts",
}),
components: Flags.string({
char: "c",
description: "place for installation of components",
}),
};
public async run(): Promise<void> { public async run(): Promise<void> {
let { let {
args, args,
flags: { force, ...flags }, flags: { force, ...flags },
} = await this.parse(Add) } = await this.parse(Add);
const resolvedConfig = await validateConfig((message: string) => this.log(message), await loadConfig(flags.config)) const resolvedConfig = await validateConfig(
const componentFolder = join(process.cwd(), resolvedConfig.paths.components) (message: string) => this.log(message),
const libFolder = join(process.cwd(), resolvedConfig.paths.lib) await loadConfig(flags.config),
);
const componentFolder = join(
process.cwd(),
resolvedConfig.paths.components,
);
const libFolder = join(process.cwd(), resolvedConfig.paths.lib);
if (!existsSync(componentFolder)) { if (!existsSync(componentFolder)) {
await mkdir(componentFolder, {recursive: true}) await mkdir(componentFolder, { recursive: true });
} }
if (!existsSync(libFolder)) { if (!existsSync(libFolder)) {
await mkdir(libFolder, {recursive: true}) await mkdir(libFolder, { recursive: true });
} }
const loadRegistryOra = ora('Fetching registry...').start() const loadRegistryOra = ora("Fetching registry...").start();
if (flags.registry) { if (flags.registry) {
this.log(`Using ${flags.branch} for branch.`) this.log(`Using ${flags.branch} for branch.`);
} }
const unsafeRegistry = await getRegistry(flags.branch) const unsafeRegistry = await getRegistry(flags.branch);
if (!unsafeRegistry.ok) { if (!unsafeRegistry.ok) {
loadRegistryOra.fail(unsafeRegistry.message) loadRegistryOra.fail(unsafeRegistry.message);
return return;
} }
const registry = unsafeRegistry.registry const registry = unsafeRegistry.registry;
const componentNames = Object.keys(registry.components) const componentNames = Object.keys(registry.components);
loadRegistryOra.succeed(`Successfully fetched registry! (${componentNames.length} components)`) loadRegistryOra.succeed(
const searchBoxComponent: {displayName: string; key: string; installed: boolean}[] = [] `Successfully fetched registry! (${componentNames.length} components)`,
);
const searchBoxComponent: {
displayName: string;
key: string;
installed: boolean;
}[] = [];
for await (const name of componentNames) { for await (const name of componentNames) {
const installed = await checkComponentInstalled(registry.components[name], resolvedConfig) const installed = await checkComponentInstalled(
registry.components[name],
resolvedConfig,
);
searchBoxComponent.push({ searchBoxComponent.push({
displayName: installed ? `${name} (installed)` : name, displayName: installed ? `${name} (installed)` : name,
key: name, key: name,
installed, installed,
}) });
} }
let name: string | undefined = args.name?.toLowerCase?.() let name: string | undefined = args.name?.toLowerCase?.();
let requireForce: boolean = let requireForce: boolean =
!name || !componentNames.includes(name.toLowerCase()) !name || !componentNames.includes(name.toLowerCase())
? false ? false
: searchBoxComponent.find(({ key }) => key === name)?.installed : searchBoxComponent.find(({ key }) => key === name)?.installed
? !force ? !force
: false : false;
if (!name || !componentNames.includes(name.toLowerCase())) { if (!name || !componentNames.includes(name.toLowerCase())) {
const [ComponentSelector, waitForComplete] = Generator() const [ComponentSelector, waitForComplete] = Generator();
const inkInstance = render( const inkInstance = render(
<ComponentSelector <ComponentSelector
components={searchBoxComponent} components={searchBoxComponent}
initialQuery={args.name} initialQuery={args.name}
onSubmit={(comp) => { onSubmit={(comp) => {
name = comp.key name = comp.key;
requireForce = comp.installed requireForce = comp.installed;
inkInstance.clear() inkInstance.clear();
}} }}
/>, />,
) );
await waitForComplete await waitForComplete;
inkInstance.unmount() inkInstance.unmount();
} }
let quit = false let quit = false;
if (requireForce) { if (requireForce) {
const [ForceSelector, waitForComplete] = Generator2() const [ForceSelector, waitForComplete] = Generator2();
const inkInstance = render( const inkInstance = render(
<ForceSelector <ForceSelector
onComplete={(value) => { onComplete={(value) => {
force = value === 'yes' force = value === "yes";
quit = value === 'no' quit = value === "no";
inkInstance.clear() inkInstance.clear();
}} }}
/>, />,
) );
await waitForComplete await waitForComplete;
inkInstance.unmount() inkInstance.unmount();
if (quit) { if (quit) {
this.log(colorize('redBright', 'Installation canceled by user.')) this.log(colorize("redBright", "Installation canceled by user."));
return return;
} }
} }
if (!name || !componentNames.includes(name.toLowerCase())) { if (!name || !componentNames.includes(name.toLowerCase())) {
this.error('Component name is not provided, or not selected.') this.error("Component name is not provided, or not selected.");
} }
const libFileOra = ora('Installing required library...').start() const libFileOra = ora("Installing required library...").start();
let successCount = 0 let successCount = 0;
for await (const libFile of registry.lib) { for await (const libFile of registry.lib) {
const filePath = join(libFolder, libFile) const filePath = join(libFolder, libFile);
if (!existsSync(filePath)) { if (!existsSync(filePath)) {
const libFileContentResponse = await safeFetch(registry.base + registry.paths.lib.replace('{libName}', libFile)) const libFileContentResponse = await safeFetch(
registry.base + registry.paths.lib.replace("{libName}", libFile),
);
if (!libFileContentResponse.ok) { if (!libFileContentResponse.ok) {
libFileOra.fail(libFileContentResponse.message) libFileOra.fail(libFileContentResponse.message);
return return;
} }
const libFileContent = await libFileContentResponse.response.text() const libFileContent = await libFileContentResponse.response.text();
await writeFile(filePath, libFileContent) await writeFile(filePath, libFileContent);
successCount++ successCount++;
} }
} }
if (successCount > 1) { if (successCount > 1) {
libFileOra.succeed('Successfully installed library files!') libFileOra.succeed("Successfully installed library files!");
} else { } else {
libFileOra.succeed('Library files are already installed!') libFileOra.succeed("Library files are already installed!");
} }
const componentFileOra = ora(`Installing ${name} component...`).start() const componentFileOra = ora(`Installing ${name} component...`).start();
const componentObject = registry.components[name] const componentObject = registry.components[name];
if (componentObject.type === 'file') { if (componentObject.type === "file") {
const componentFile = join(componentFolder, registry.components[name].name) const componentFile = join(
componentFolder,
registry.components[name].name,
);
if (existsSync(componentFile) && !force) { if (existsSync(componentFile) && !force) {
componentFileOra.succeed(`Component is already installed! (${componentFile})`) componentFileOra.succeed(
`Component is already installed! (${componentFile})`,
);
} else { } else {
const componentFileContentResponse = await safeFetch(await getComponentURL(registry, componentObject)) const componentFileContentResponse = await safeFetch(
await getComponentURL(registry, componentObject),
);
if (!componentFileContentResponse.ok) { if (!componentFileContentResponse.ok) {
componentFileOra.fail(componentFileContentResponse.message) componentFileOra.fail(componentFileContentResponse.message);
return return;
} }
const componentFileContent = (await componentFileContentResponse.response.text()).replaceAll( const componentFileContent = (
/import\s+{[^}]*}\s+from\s+"@pswui-lib"/g, await componentFileContentResponse.response.text()
(match) => match.replace(/@pswui-lib/, resolvedConfig.import.lib), ).replaceAll(/import\s+{[^}]*}\s+from\s+"@pswui-lib"/g, (match) =>
) match.replace(/@pswui-lib/, resolvedConfig.import.lib),
await writeFile(componentFile, componentFileContent) );
componentFileOra.succeed('Component is successfully installed!') await writeFile(componentFile, componentFileContent);
componentFileOra.succeed("Component is successfully installed!");
} }
} else if (componentObject.type === 'dir') { } else if (componentObject.type === "dir") {
const componentDir = join(componentFolder, componentObject.name) const componentDir = join(componentFolder, componentObject.name);
if (!existsSync(componentDir)) { if (!existsSync(componentDir)) {
await mkdir(componentDir, {recursive: true}) await mkdir(componentDir, { recursive: true });
} }
const requiredFiles = await getDirComponentRequiredFiles(componentObject, resolvedConfig) const requiredFiles = await getDirComponentRequiredFiles(
componentObject,
resolvedConfig,
);
if (requiredFiles.length === 0 && !force) { if (requiredFiles.length === 0 && !force) {
componentFileOra.succeed(`Component is already installed! (${componentDir})`) componentFileOra.succeed(
`Component is already installed! (${componentDir})`,
);
} else { } else {
const requiredFilesURLs = await getDirComponentURL(registry, componentObject, requiredFiles) const requiredFilesURLs = await getDirComponentURL(
registry,
componentObject,
requiredFiles,
);
for await (const [filename, url] of requiredFilesURLs) { for await (const [filename, url] of requiredFilesURLs) {
const componentFile = join(componentDir, filename) const componentFile = join(componentDir, filename);
if (!existsSync(componentFile) || force) { if (!existsSync(componentFile) || force) {
const componentFileContentResponse = await safeFetch(url) const componentFileContentResponse = await safeFetch(url);
if (!componentFileContentResponse.ok) { if (!componentFileContentResponse.ok) {
componentFileOra.fail(componentFileContentResponse.message) componentFileOra.fail(componentFileContentResponse.message);
return return;
} }
const componentFileContent = (await componentFileContentResponse.response.text()).replaceAll( const componentFileContent = (
/import\s+{[^}]*}\s+from\s+"@pswui-lib"/g, await componentFileContentResponse.response.text()
(match) => match.replace(/@pswui-lib/, resolvedConfig.import.lib), ).replaceAll(/import\s+{[^}]*}\s+from\s+"@pswui-lib"/g, (match) =>
) match.replace(/@pswui-lib/, resolvedConfig.import.lib),
await writeFile(componentFile, componentFileContent) );
await writeFile(componentFile, componentFileContent);
} }
} }
componentFileOra.succeed('Component is successfully installed!') componentFileOra.succeed("Component is successfully installed!");
} }
} }
this.log('Now you can import the component.') this.log("Now you can import the component.");
} }
} }

94
packages/cli/src/commands/list.ts
View File

@ -1,65 +1,89 @@
import {Command, Flags} from '@oclif/core' import { Command, Flags } from "@oclif/core";
import ora from 'ora' import ora from "ora";
import treeify from 'treeify' import treeify from "treeify";
import {loadConfig, validateConfig} from '../helpers/config.js' import { loadConfig, validateConfig } from "../helpers/config.js";
import {checkComponentInstalled} from '../helpers/path.js' import { checkComponentInstalled } from "../helpers/path.js";
import {getComponentURL, getDirComponentURL, getRegistry} from '../helpers/registry.js' import {
getComponentURL,
getDirComponentURL,
getRegistry,
} from "../helpers/registry.js";
export default class List extends Command { export default class List extends Command {
static override description = 'Prints all available components in registry and components installed in this project.' static override description =
"Prints all available components in registry and components installed in this project.";
static override examples = ['<%= config.bin %> <%= command.id %>'] static override examples = ["<%= config.bin %> <%= command.id %>"];
static override flags = { static override flags = {
branch: Flags.string({char: 'r', description: 'use other branch instead of main'}), branch: Flags.string({
config: Flags.string({char: 'p', description: 'path to config'}), char: "r",
url: Flags.boolean({char: 'u', description: 'include component file URL'}), description: "use other branch instead of main",
} }),
config: Flags.string({ char: "p", description: "path to config" }),
url: Flags.boolean({
char: "u",
description: "include component file URL",
}),
};
public async run(): Promise<void> { public async run(): Promise<void> {
const {flags} = await this.parse(List) const { flags } = await this.parse(List);
const registrySpinner = ora('Fetching registry...') const registrySpinner = ora("Fetching registry...");
const loadedConfig = await validateConfig((message: string) => this.log(message), await loadConfig(flags.config)) const loadedConfig = await validateConfig(
(message: string) => this.log(message),
await loadConfig(flags.config),
);
registrySpinner.start() registrySpinner.start();
if (flags.branch) { if (flags.branch) {
this.log(`Using ${flags.branch} for registry.`) this.log(`Using ${flags.branch} for registry.`);
} }
const unsafeRegistry = await getRegistry(flags.branch) const unsafeRegistry = await getRegistry(flags.branch);
if (!unsafeRegistry.ok) { if (!unsafeRegistry.ok) {
registrySpinner.fail(unsafeRegistry.message) registrySpinner.fail(unsafeRegistry.message);
return return;
} }
const {registry} = unsafeRegistry const { registry } = unsafeRegistry;
const names = Object.keys(registry.components) const names = Object.keys(registry.components);
registrySpinner.succeed(`Fetched ${names.length} components.`) registrySpinner.succeed(`Fetched ${names.length} components.`);
let final: Record<string, {URL?: Record<string, string>; installed: 'no' | 'yes'}> = {} let final: Record<
string,
{ URL?: Record<string, string>; installed: "no" | "yes" }
> = {};
for await (const name of names) { for await (const name of names) {
const componentObject = registry.components[name] const componentObject = registry.components[name];
const installed = (await checkComponentInstalled(componentObject, loadedConfig)) ? 'yes' : 'no' const installed = (await checkComponentInstalled(
componentObject,
loadedConfig,
))
? "yes"
: "no";
if (flags.url) { if (flags.url) {
let url: Record<string, string> = {} let url: Record<string, string> = {};
if (componentObject.type === 'file') { if (componentObject.type === "file") {
url[name] = await getComponentURL(registry, componentObject) url[name] = await getComponentURL(registry, componentObject);
} else if (componentObject.type === 'dir') { } else if (componentObject.type === "dir") {
url = Object.fromEntries(await getDirComponentURL(registry, componentObject)) url = Object.fromEntries(
await getDirComponentURL(registry, componentObject),
);
} }
final = {...final, [name]: {URL: url, installed}} final = { ...final, [name]: { URL: url, installed } };
} else { } else {
final = {...final, [name]: {installed}} final = { ...final, [name]: { installed } };
} }
} }
this.log('AVAILABLE COMPONENTS') this.log("AVAILABLE COMPONENTS");
this.log(treeify.asTree(final, true, true)) this.log(treeify.asTree(final, true, true));
} }
} }

41
packages/cli/src/commands/search.tsx
View File

@ -1,42 +1,45 @@
import {Command, Args, Flags} from '@oclif/core' import { Args, Command, Flags } from "@oclif/core";
import {render} from 'ink' import { render } from "ink";
import {SearchBox} from '../components/SearchBox.js' import React from "react";
import {getRegistry} from '../helpers/registry.js' import { SearchBox } from "../components/SearchBox.js";
import React from 'react' import { getRegistry } from "../helpers/registry.js";
export default class Search extends Command { export default class Search extends Command {
static override args = { static override args = {
query: Args.string({description: 'search query'}), query: Args.string({ description: "search query" }),
} };
static override flags = { static override flags = {
branch: Flags.string({char: 'r', description: 'use other branch instead of main'}), branch: Flags.string({
} char: "r",
description: "use other branch instead of main",
}),
};
static override description = 'Search components.' static override description = "Search components.";
static override examples = ['<%= config.bin %> <%= command.id %>'] static override examples = ["<%= config.bin %> <%= command.id %>"];
public async run(): Promise<void> { public async run(): Promise<void> {
const {args, flags} = await this.parse(Search) const { args, flags } = await this.parse(Search);
if (flags.branch) { if (flags.branch) {
this.log(`Using ${flags.branch} for registry.`) this.log(`Using ${flags.branch} for registry.`);
} }
const registryResult = await getRegistry(flags.branch) const registryResult = await getRegistry(flags.branch);
if (!registryResult.ok) { if (!registryResult.ok) {
this.error(registryResult.message) this.error(registryResult.message);
} }
const registry = registryResult.registry const registry = registryResult.registry;
const componentNames = Object.keys(registry.components) const componentNames = Object.keys(registry.components);
await render( await render(
<SearchBox <SearchBox
components={componentNames.map((v) => ({ key: v, displayName: v }))} components={componentNames.map((v) => ({ key: v, displayName: v }))}
initialQuery={args.query} initialQuery={args.query}
helper={'Press ESC to quit'} helper={"Press ESC to quit"}
onKeyDown={(_, k, app) => k.escape && app.exit()} onKeyDown={(_, k, app) => k.escape && app.exit()}
/>, />,
).waitUntilExit() ).waitUntilExit();
} }
} }

69
packages/cli/src/components/Choice.tsx
View File

@ -1,26 +1,26 @@
import React, {useState} from 'react' import { Box, Text, useInput } from "ink";
import {Box, Text, useInput} from 'ink' import React, { useState } from "react";
function isUnicodeSupported() { function isUnicodeSupported() {
if (process.platform !== 'win32') { if (process.platform !== "win32") {
return process.env['TERM'] !== 'linux' // Linux console (kernel) return process.env.TERM !== "linux"; // Linux console (kernel)
} }
return ( return (
Boolean(process.env['WT_SESSION']) || // Windows Terminal Boolean(process.env.WT_SESSION) || // Windows Terminal
Boolean(process.env['TERMINUS_SUBLIME']) || // Terminus (<0.2.27) Boolean(process.env.TERMINUS_SUBLIME) || // Terminus (<0.2.27)
process.env['ConEmuTask'] === '{cmd::Cmder}' || // ConEmu and cmder process.env.ConEmuTask === "{cmd::Cmder}" || // ConEmu and cmder
process.env['TERM_PROGRAM'] === 'Terminus-Sublime' || process.env.TERM_PROGRAM === "Terminus-Sublime" ||
process.env['TERM_PROGRAM'] === 'vscode' || process.env.TERM_PROGRAM === "vscode" ||
process.env['TERM'] === 'xterm-256color' || process.env.TERM === "xterm-256color" ||
process.env['TERM'] === 'alacritty' || process.env.TERM === "alacritty" ||
process.env['TERMINAL_EMULATOR'] === 'JetBrains-JediTerm' process.env.TERMINAL_EMULATOR === "JetBrains-JediTerm"
) );
} }
const shouldUseMain = isUnicodeSupported() const shouldUseMain = isUnicodeSupported();
const SELECTED: string = shouldUseMain ? '◉' : '(*)' const SELECTED: string = shouldUseMain ? "◉" : "(*)";
const UNSELECTED: string = shouldUseMain ? '◯' : '( )' const UNSELECTED: string = shouldUseMain ? "◯" : "( )";
export function Choice({ export function Choice({
question, question,
@ -29,35 +29,38 @@ export function Choice({
onSubmit, onSubmit,
initial, initial,
}: { }: {
question: string question: string;
yes: string yes: string;
no: string no: string;
onSubmit?: (vaule: 'yes' | 'no') => void onSubmit?: (vaule: "yes" | "no") => void;
initial?: 'yes' | 'no' initial?: "yes" | "no";
}) { }) {
const [state, setState] = useState<'yes' | 'no'>(initial ?? 'yes') const [state, setState] = useState<"yes" | "no">(initial ?? "yes");
useInput((_, k) => { useInput((_, k) => {
if (k.upArrow) { if (k.upArrow) {
setState('yes') setState("yes");
} else if (k.downArrow) { } else if (k.downArrow) {
setState('no') setState("no");
} }
if (k.return) { if (k.return) {
onSubmit?.(state) onSubmit?.(state);
} }
}) });
return ( return (
<Box display={'flex'} flexDirection={'column'}> <Box
<Text color={'greenBright'}>{question}</Text> display={"flex"}
<Text color={state === 'yes' ? undefined : 'gray'}> flexDirection={"column"}
{state === 'yes' ? SELECTED : UNSELECTED} {yes} >
<Text color={"greenBright"}>{question}</Text>
<Text color={state === "yes" ? undefined : "gray"}>
{state === "yes" ? SELECTED : UNSELECTED} {yes}
</Text> </Text>
<Text color={state === 'no' ? undefined : 'gray'}> <Text color={state === "no" ? undefined : "gray"}>
{state === 'no' ? SELECTED : UNSELECTED} {no} {state === "no" ? SELECTED : UNSELECTED} {no}
</Text> </Text>
</Box> </Box>
) );
} }

18
packages/cli/src/components/Divider.tsx
View File

@ -1,24 +1,32 @@
import React from 'react' import { Box, Text } from "ink";
import {Box, Text} from 'ink' import React from "react";
export function Divider({width = 50, padding = 1, title}: {width?: number; padding?: number; title: string}) { export function Divider({
const length = Math.floor((width - title.length - padding * 2) / 2) width = 50,
padding = 1,
title,
}: { width?: number; padding?: number; title: string }) {
const length = Math.floor((width - title.length - padding * 2) / 2);
return ( return (
<Box> <Box>
{Array.from(Array(length)).map((_, i) => ( {Array.from(Array(length)).map((_, i) => (
// biome-ignore lint/suspicious/noArrayIndexKey: there's nothing to be key except index
<Text key={i}>─</Text> <Text key={i}>─</Text>
))} ))}
{Array.from(Array(padding)).map((_, i) => ( {Array.from(Array(padding)).map((_, i) => (
// biome-ignore lint/suspicious/noArrayIndexKey: there's nothing to be key except index
<Text key={i}> </Text> <Text key={i}> </Text>
))} ))}
<Text>{title}</Text> <Text>{title}</Text>
{Array.from(Array(padding)).map((_, i) => ( {Array.from(Array(padding)).map((_, i) => (
// biome-ignore lint/suspicious/noArrayIndexKey: there's nothing to be key except index
<Text key={i}> </Text> <Text key={i}> </Text>
))} ))}
{Array.from(Array(length)).map((_, i) => ( {Array.from(Array(length)).map((_, i) => (
// biome-ignore lint/suspicious/noArrayIndexKey: there's nothing to be key except index
<Text key={i}>─</Text> <Text key={i}>─</Text>
))} ))}
</Box> </Box>
) );
} }

121
packages/cli/src/components/SearchBox.tsx
View File

@ -1,8 +1,8 @@
import React, {useEffect, useState} from 'react' import { Box, type Key, Text, useApp, useInput } from "ink";
import {getSuggestion} from '../helpers/search.js' import Input from "ink-text-input";
import Input from 'ink-text-input' import React, { useEffect, useState } from "react";
import {Divider} from './Divider.js' import { getSuggestion } from "../helpers/search.js";
import {Box, Text, useInput, useApp, type Key} from 'ink' import { Divider } from "./Divider.js";
export function SearchBox<T extends { key: string; displayName: string }>({ export function SearchBox<T extends { key: string; displayName: string }>({
components, components,
@ -12,92 +12,115 @@ export function SearchBox<T extends {key: string; displayName: string}>({
onChange, onChange,
onSubmit, onSubmit,
}: { }: {
components: T[] components: T[];
helper: string helper: string;
initialQuery?: string initialQuery?: string;
onKeyDown?: (i: string, k: Key, app: ReturnType<typeof useApp>) => void onKeyDown?: (i: string, k: Key, app: ReturnType<typeof useApp>) => void;
onChange?: (item: T) => void onChange?: (item: T) => void;
onSubmit?: (item: T) => void onSubmit?: (item: T) => void;
}) { }) {
const [query, setQuery] = useState<string>(initialQuery ?? '') const [query, setQuery] = useState<string>(initialQuery ?? "");
const [queryMode, setQueryMode] = useState<boolean>(true) const [queryMode, setQueryMode] = useState<boolean>(true);
const [isLoading, setLoading] = useState<boolean>(false) const [isLoading, setLoading] = useState<boolean>(false);
const [suggestions, setSuggestions] = useState<string[]>([]) const [suggestions, setSuggestions] = useState<string[]>([]);
const [selected, setSelected] = useState<number>(-1) const [selected, setSelected] = useState<number>(-1);
useEffect(() => { useEffect(() => {
if (queryMode) { if (queryMode) {
setLoading(true) setLoading(true);
getSuggestion( getSuggestion(
components.map(({ key }) => key), components.map(({ key }) => key),
query, query,
).then((result) => { ).then((result) => {
setSuggestions(result) setSuggestions(result);
setSelected(-1) setSelected(-1);
}) });
} }
}, [query, queryMode]) }, [query, queryMode, components]);
useEffect(() => { useEffect(() => {
if (onChange) { if (onChange) {
const found = components.find(({key}) => key === suggestions[selected]) const found = components.find(({ key }) => key === suggestions[selected]);
found && onChange(found) found && onChange(found);
} }
}, [selected, suggestions, onChange]) }, [selected, suggestions, onChange, components]);
const app = useApp() const app = useApp();
useInput((i, k) => { useInput((i, k) => {
if (k.downArrow) { if (k.downArrow) {
setSelected((p) => (p >= suggestions.length - 1 ? 0 : p + 1)) setSelected((p) => (p >= suggestions.length - 1 ? 0 : p + 1));
setQueryMode(false) setQueryMode(false);
} }
if (k.upArrow) { if (k.upArrow) {
setSelected((p) => (p <= 0 ? suggestions.length - 1 : p - 1)) setSelected((p) => (p <= 0 ? suggestions.length - 1 : p - 1));
setQueryMode(false) setQueryMode(false);
} }
onKeyDown?.(i, k, app) onKeyDown?.(i, k, app);
}) });
useEffect(() => { useEffect(() => {
if (!queryMode && suggestions[selected]) { if (!queryMode && suggestions[selected]) {
setQuery(suggestions[selected]) setQuery(suggestions[selected]);
} }
}, [queryMode, selected]) }, [queryMode, selected, suggestions]);
return ( return (
<Box width={50} display={'flex'} flexDirection={'column'}> <Box
<Text color={'gray'}>{helper}</Text> width={50}
<Box display={'flex'} flexDirection={'row'}> display={"flex"}
<Box marginRight={1} display={'flex'} flexDirection={'row'}> flexDirection={"column"}
<Text color={'greenBright'}>Search?</Text> >
<Text color={"gray"}>{helper}</Text>
<Box
display={"flex"}
flexDirection={"row"}
>
<Box
marginRight={1}
display={"flex"}
flexDirection={"row"}
>
<Text color={"greenBright"}>Search?</Text>
</Box> </Box>
<Input <Input
value={query} value={query}
onChange={(v) => { onChange={(v) => {
setQueryMode(true) setQueryMode(true);
setQuery(v) setQuery(v);
}} }}
showCursor showCursor
placeholder={' query'} placeholder={" query"}
onSubmit={() => { onSubmit={() => {
const found = components.find(({key}) => key === suggestions[selected]) const found = components.find(
found && onSubmit?.(found) ({ key }) => key === suggestions[selected],
);
found && onSubmit?.(found);
}} }}
/> />
</Box> </Box>
<Divider title={isLoading ? 'Loading...' : `${suggestions.length} components found.`} /> <Divider
<Box display={'flex'} flexDirection={'column'}> title={
isLoading ? "Loading..." : `${suggestions.length} components found.`
}
/>
<Box
display={"flex"}
flexDirection={"column"}
>
{suggestions.map((name, index) => { {suggestions.map((name, index) => {
return ( return (
<Box key={name}> <Box key={name}>
<Text color={selected === index ? undefined : 'gray'}> <Text color={selected === index ? undefined : "gray"}>
{components[components.findIndex(({key}) => key === name)].displayName} {
components[components.findIndex(({ key }) => key === name)]
.displayName
}
</Text> </Text>
</Box> </Box>
) );
})} })}
</Box> </Box>
</Box> </Box>
) );
} }

62
packages/cli/src/const.ts
View File

@ -1,27 +1,28 @@
import {z} from 'zod' import { z } from "zod";
export const registryURL = (branch: string) => `https://raw.githubusercontent.com/pswui/ui/${branch}/registry.json` export const registryURL = (branch: string) =>
export const CONFIG_DEFAULT_PATH = 'pswui.config.js' `https://raw.githubusercontent.com/pswui/ui/${branch}/registry.json`;
export const CONFIG_DEFAULT_PATH = "pswui.config.js";
export type RegistryComponent = export type RegistryComponent =
| { | {
files: string[] files: string[];
name: string name: string;
type: 'dir' type: "dir";
} }
| { | {
name: string name: string;
type: 'file' type: "file";
} };
export interface Registry { export interface Registry {
base: string base: string;
components: Record<string, RegistryComponent> components: Record<string, RegistryComponent>;
lib: string[] lib: string[];
paths: { paths: {
components: string components: string;
lib: string lib: string;
} };
} }
export interface Config { export interface Config {
@ -29,29 +30,31 @@ export interface Config {
* Absolute path that will used for import in component * Absolute path that will used for import in component
*/ */
import?: { import?: {
lib?: '@pswui-lib' | string lib?: "@pswui-lib" | string;
} };
/** /**
* Path that cli will create a file. * Path that cli will create a file.
*/ */
paths?: { paths?: {
components?: 'src/pswui/components' | string components?: "src/pswui/components" | string;
lib?: 'src/pswui/lib' | string lib?: "src/pswui/lib" | string;
} };
} }
export type ResolvedConfig<T = Config> = { export type ResolvedConfig<T = Config> = {
[k in keyof T]-?: NonNullable<T[k]> extends object ? ResolvedConfig<NonNullable<T[k]>> : T[k] [k in keyof T]-?: NonNullable<T[k]> extends object
} ? ResolvedConfig<NonNullable<T[k]>>
: T[k];
};
export const DEFAULT_CONFIG = { export const DEFAULT_CONFIG = {
import: { import: {
lib: '@pswui-lib', lib: "@pswui-lib",
}, },
paths: { paths: {
components: 'src/pswui/components', components: "src/pswui/components",
lib: 'src/pswui/lib', lib: "src/pswui/lib",
}, },
} };
export const configZod = z.object({ export const configZod = z.object({
import: z import: z
.object({ .object({
@ -61,9 +64,12 @@ export const configZod = z.object({
.default(DEFAULT_CONFIG.import), .default(DEFAULT_CONFIG.import),
paths: z paths: z
.object({ .object({
components: z.string().optional().default(DEFAULT_CONFIG.paths.components), components: z
.string()
.optional()
.default(DEFAULT_CONFIG.paths.components),
lib: z.string().optional().default(DEFAULT_CONFIG.paths.lib), lib: z.string().optional().default(DEFAULT_CONFIG.paths.lib),
}) })
.optional() .optional()
.default(DEFAULT_CONFIG.paths), .default(DEFAULT_CONFIG.paths),
}) });

66
packages/cli/src/helpers/config.ts
View File

@ -1,43 +1,67 @@
import {colorize} from '@oclif/core/ux' import { existsSync } from "node:fs";
import {existsSync} from 'node:fs' import path from "node:path";
import path from 'node:path' import { colorize } from "@oclif/core/ux";
import {CONFIG_DEFAULT_PATH, DEFAULT_CONFIG, ResolvedConfig, configZod} from '../const.js' import {
import {changeExtension} from './path.js' CONFIG_DEFAULT_PATH,
DEFAULT_CONFIG,
type ResolvedConfig,
configZod,
} from "../const.js";
import { changeExtension } from "./path.js";
export async function loadConfig(config?: string): Promise<unknown> { export async function loadConfig(config?: string): Promise<unknown> {
const userConfigPath = config ? path.join(process.cwd(), config) : null const userConfigPath = config ? path.join(process.cwd(), config) : null;
const defaultConfigPath = path.join(process.cwd(), CONFIG_DEFAULT_PATH) const defaultConfigPath = path.join(process.cwd(), CONFIG_DEFAULT_PATH);
const cjsConfigPath = path.join(process.cwd(), await changeExtension(CONFIG_DEFAULT_PATH, '.cjs')) const cjsConfigPath = path.join(
const mjsConfigPath = path.join(process.cwd(), await changeExtension(CONFIG_DEFAULT_PATH, '.mjs')) process.cwd(),
await changeExtension(CONFIG_DEFAULT_PATH, ".cjs"),
);
const mjsConfigPath = path.join(
process.cwd(),
await changeExtension(CONFIG_DEFAULT_PATH, ".mjs"),
);
if (userConfigPath) { if (userConfigPath) {
if (existsSync(userConfigPath)) { if (existsSync(userConfigPath)) {
return (await import(userConfigPath)).default return (await import(userConfigPath)).default;
} }
throw new Error(`Error: config ${userConfigPath} not found.`) throw new Error(`Error: config ${userConfigPath} not found.`);
} }
if (existsSync(defaultConfigPath)) { if (existsSync(defaultConfigPath)) {
return (await import(defaultConfigPath)).default return (await import(defaultConfigPath)).default;
} }
if (existsSync(cjsConfigPath)) { if (existsSync(cjsConfigPath)) {
return (await import(cjsConfigPath)).default return (await import(cjsConfigPath)).default;
} }
if (existsSync(mjsConfigPath)) { if (existsSync(mjsConfigPath)) {
return (await import(mjsConfigPath)).default return (await import(mjsConfigPath)).default;
} }
return DEFAULT_CONFIG return DEFAULT_CONFIG;
} }
export async function validateConfig(log: (message: string) => void, config?: unknown): Promise<ResolvedConfig> { export async function validateConfig(
const parsedConfig: ResolvedConfig = await configZod.parseAsync(config) log: (message: string) => void,
log(colorize('gray', `Install component to: ${path.join(process.cwd(), parsedConfig.paths.components)}`)) config?: unknown,
log(colorize('gray', `Install shared module to: ${path.join(process.cwd(), parsedConfig.paths.lib)}`)) ): Promise<ResolvedConfig> {
log(colorize('gray', `Import shared with: ${parsedConfig.import.lib}`)) const parsedConfig: ResolvedConfig = await configZod.parseAsync(config);
return parsedConfig log(
colorize(
"gray",
`Install component to: ${path.join(process.cwd(), parsedConfig.paths.components)}`,
),
);
log(
colorize(
"gray",
`Install shared module to: ${path.join(process.cwd(), parsedConfig.paths.lib)}`,
),
);
log(colorize("gray", `Import shared with: ${parsedConfig.import.lib}`));
return parsedConfig;
} }

62
packages/cli/src/helpers/path.ts
View File

@ -1,38 +1,52 @@
import {existsSync} from 'node:fs' import { existsSync } from "node:fs";
import {readdir} from 'node:fs/promises' import { readdir } from "node:fs/promises";
import path from 'node:path' import path from "node:path";
import {RegistryComponent, ResolvedConfig} from '../const.js' import type { RegistryComponent, ResolvedConfig } from "../const.js";
export async function getDirComponentRequiredFiles<T extends {type: 'dir'} & RegistryComponent>( export async function getDirComponentRequiredFiles<
componentObject: T, T extends { type: "dir" } & RegistryComponent,
config: ResolvedConfig, >(componentObject: T, config: ResolvedConfig) {
) { const componentPath = path.join(
const componentPath = path.join(process.cwd(), config.paths.components, componentObject.name) process.cwd(),
config.paths.components,
componentObject.name,
);
if (!existsSync(componentPath)) { if (!existsSync(componentPath)) {
return componentObject.files return componentObject.files;
} }
const dir = await readdir(componentPath) const dir = await readdir(componentPath);
return componentObject.files.filter((filename) => !dir.includes(filename)) return componentObject.files.filter((filename) => !dir.includes(filename));
} }
export async function checkComponentInstalled(component: RegistryComponent, config: ResolvedConfig): Promise<boolean> { export async function checkComponentInstalled(
const componentDirRoot = path.join(process.cwd(), config.paths.components) component: RegistryComponent,
if (!existsSync(componentDirRoot)) return false config: ResolvedConfig,
): Promise<boolean> {
const componentDirRoot = path.join(process.cwd(), config.paths.components);
if (!existsSync(componentDirRoot)) return false;
if (component.type === 'file') { if (component.type === "file") {
const dir = await readdir(componentDirRoot) const dir = await readdir(componentDirRoot);
return dir.includes(component.name) return dir.includes(component.name);
} }
const componentDir = path.join(componentDirRoot, component.name) const componentDir = path.join(componentDirRoot, component.name);
if (!existsSync(componentDir)) return false if (!existsSync(componentDir)) return false;
const dir = await readdir(componentDir) const dir = await readdir(componentDir);
return component.files.filter((filename) => !dir.includes(filename)).length === 0 return (
component.files.filter((filename) => !dir.includes(filename)).length === 0
);
} }
export async function changeExtension(_path: string, extension: string): Promise<string> { export async function changeExtension(
return path.join(path.dirname(_path), path.basename(_path, path.extname(_path)) + extension) _path: string,
extension: string,
): Promise<string> {
return path.join(
path.dirname(_path),
path.basename(_path, path.extname(_path)) + extension,
);
} }

36
packages/cli/src/helpers/registry.ts
View File

@ -1,37 +1,49 @@
import {Registry, RegistryComponent, registryURL} from '../const.js' import {
import {safeFetch} from './safe-fetcher.js' type Registry,
type RegistryComponent,
registryURL,
} from "../const.js";
import { safeFetch } from "./safe-fetcher.js";
export async function getRegistry( export async function getRegistry(
branch?: string, branch?: string,
): Promise<{ message: string; ok: false } | { ok: true; registry: Registry }> { ): Promise<{ message: string; ok: false } | { ok: true; registry: Registry }> {
const registryResponse = await safeFetch(registryURL(branch ?? 'main')) const registryResponse = await safeFetch(registryURL(branch ?? "main"));
if (registryResponse.ok) { if (registryResponse.ok) {
const registryJson = (await registryResponse.response.json()) as Registry const registryJson = (await registryResponse.response.json()) as Registry;
registryJson.base = registryJson.base.replace('{branch}', branch ?? 'main') registryJson.base = registryJson.base.replace("{branch}", branch ?? "main");
return { return {
ok: true, ok: true,
registry: registryJson, registry: registryJson,
} };
} }
return registryResponse return registryResponse;
} }
export async function getComponentURL( export async function getComponentURL(
registry: Registry, registry: Registry,
component: {type: 'file'} & RegistryComponent, component: { type: "file" } & RegistryComponent,
): Promise<string> { ): Promise<string> {
return registry.base + registry.paths.components.replace('{componentName}', component.name) return (
registry.base +
registry.paths.components.replace("{componentName}", component.name)
);
} }
export async function getDirComponentURL( export async function getDirComponentURL(
registry: Registry, registry: Registry,
component: {type: 'dir'} & RegistryComponent, component: { type: "dir" } & RegistryComponent,
files?: string[], files?: string[],
): Promise<[string, string][]> { ): Promise<[string, string][]> {
const base = registry.base + registry.paths.components.replace('{componentName}', component.name) const base =
registry.base +
registry.paths.components.replace("{componentName}", component.name);
return (files ?? component.files).map((filename) => [filename, base + '/' + filename]) return (files ?? component.files).map((filename) => [
filename,
`${base}/${filename}`,
]);
} }

13
packages/cli/src/helpers/safe-fetcher.ts
View File

@ -1,19 +1,22 @@
import fetch, {Response} from 'node-fetch' import fetch, { type Response } from "node-fetch";
export async function safeFetch( export async function safeFetch(
url: string, url: string,
): Promise<{message: string; ok: false; response: Response} | {ok: true; response: Response}> { ): Promise<
const response = await fetch(url) | { message: string; ok: false; response: Response }
| { ok: true; response: Response }
> {
const response = await fetch(url);
if (response.ok) { if (response.ok) {
return { return {
ok: true, ok: true,
response, response,
} };
} }
return { return {
message: `Error while fetching from ${response.url}: ${response.status} ${response.statusText}`, message: `Error while fetching from ${response.url}: ${response.status} ${response.statusText}`,
ok: false, ok: false,
response, response,
} };
} }

62
packages/cli/src/helpers/search.ts
View File

@ -1,63 +1,69 @@
export async function jaroWinkler(a: string, b: string): Promise<number> { export async function jaroWinkler(a: string, b: string): Promise<number> {
const p = 0.1 const p = 0.1;
if (a.length === 0 || b.length === 0) return 0 if (a.length === 0 || b.length === 0) return 0;
if (a === b) return 1 if (a === b) return 1;
const range = Math.floor(Math.max(a.length, b.length) / 2) - 1 const range = Math.floor(Math.max(a.length, b.length) / 2) - 1;
let matches = 0 let matches = 0;
const aMatches = Array.from({length: a.length}) const aMatches = Array.from({ length: a.length });
const bMatches = Array.from({length: b.length}) const bMatches = Array.from({ length: b.length });
for (const [i, element] of Object.entries(a).map( for (const [i, element] of Object.entries(a).map(
([index, element]) => [Number.parseInt(index, 10), element] as const, ([index, element]) => [Number.parseInt(index, 10), element] as const,
)) { )) {
const start = i >= range ? i - range : 0 const start = i >= range ? i - range : 0;
const end = i + range <= b.length - 1 ? i + range : b.length - 1 const end = i + range <= b.length - 1 ? i + range : b.length - 1;
for (let j = start; j <= end; j++) { for (let j = start; j <= end; j++) {
if (bMatches[j] !== true && element === b[j]) { if (bMatches[j] !== true && element === b[j]) {
++matches ++matches;
aMatches[i] = true aMatches[i] = true;
bMatches[j] = true bMatches[j] = true;
break break;
} }
} }
} }
if (matches === 0) return 0 if (matches === 0) return 0;
let t = 0 let t = 0;
let point: number let point: number;
for (point = 0; point < a.length; point++) if (aMatches[point]) break for (point = 0; point < a.length; point++) if (aMatches[point]) break;
for (let i = point; i < a.length; i++) for (let i = point; i < a.length; i++)
if (aMatches[i]) { if (aMatches[i]) {
let j let j: number;
for (j = point; j < b.length; j++) for (j = point; j < b.length; j++)
if (bMatches[j]) { if (bMatches[j]) {
point = j + 1 point = j + 1;
break break;
} }
if (a[i] !== b[j]) ++t if (a[i] !== b[j]) ++t;
} }
t /= 2 t /= 2;
const J = (matches / a.length + matches / b.length + (matches - t) / matches) / 3 const J =
return J + Math.min((p * t) / matches, 1) * (1 - J) (matches / a.length + matches / b.length + (matches - t) / matches) / 3;
return J + Math.min((p * t) / matches, 1) * (1 - J);
} }
export async function getSuggestion(componentNames: string[], input: string): Promise<string[]> { export async function getSuggestion(
componentNames: string[],
input: string,
): Promise<string[]> {
const componentJw = await Promise.all( const componentJw = await Promise.all(
componentNames.map(async (name) => [name, await jaroWinkler(name, input)] as const), componentNames.map(
) async (name) => [name, await jaroWinkler(name, input)] as const,
),
);
return componentJw return componentJw
.filter(([_, score]) => score > 0) .filter(([_, score]) => score > 0)
.sort((a, b) => b[1] - a[1]) .sort((a, b) => b[1] - a[1])
.map(([name]) => name) .map(([name]) => name);
} }

4
packages/cli/src/index.ts
View File

@ -1,2 +1,2 @@
export * from './public.js' export * from "./public.js";
export {run} from '@oclif/core' export { run } from "@oclif/core";

8
packages/cli/src/public.ts
View File

@ -1,9 +1,9 @@
import {Config} from './const.js' import type { Config } from "./const.js";
function buildConfig(config: Config): Config { function buildConfig(config: Config): Config {
return config return config;
} }
export {buildConfig} export { buildConfig };
export {Config} from './const.js' export { Config } from "./const.js";

11
packages/react/src/main.tsx
View File

@ -1,7 +1,14 @@
import "./tailwind.css"; import "./tailwind.css";
import App from "@/DialogOverflowTest.tsx";
import React from "react"; import React from "react";
import ReactDOM from "react-dom/client"; import ReactDOM from "react-dom/client";
ReactDOM.createRoot(document.getElementById("root")!).render( const ROOT = document.getElementById("root");
<React.StrictMode></React.StrictMode>,
if (!ROOT) throw new Error("ROOT is not found");
ReactDOM.createRoot(ROOT).render(
<React.StrictMode>
<App />
</React.StrictMode>,
); );