Use vite in lib, update eslint + prettier

.vscode/settings.json

@@ -21,7 +21,6 @@
   "eslint.alwaysShowStatus": true,
   "eslint.format.enable": true,
   "eslint.lintTask.enable": true,
-  "eslint.packageManager": "pnpm",
   "eslint.quiet": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
@@ -32,6 +31,9 @@
   "eslint.workingDirectories": [
     "./data-browser",
     "./react",
-    "./lib"
-  ]
+    "./lib",
+    "./cli",
+    "./svelte"
+  ],
+  "typescript.preferences.preferTypeOnlyAutoImports": true,
 }

browser/lib/jest.config.cjs → browser/data-browser/jest.config.cjs

@@ -1,3 +1,4 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   roots: ['<rootDir>/src'],
   testMatch: [

browser/data-browser/package.json

@@ -45,6 +45,7 @@
     "yamde": "^1.7.1"
   },
   "devDependencies": {
+    "vite": "^5.2.10",
     "@swc/plugin-styled-components": "^1.5.110",
     "@types/react-pdf": "^6.2.0",
     "@types/react-window": "^1.8.7",

browser/data-browser/src/components/ButtonGroup.tsx

@@ -108,7 +108,9 @@ const Label = styled.label`
   color: ${p => p.theme.colors.textLight};
   cursor: pointer;
 
-  transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
+  transition:
+    background-color 0.1s ease-in-out,
+    color 0.1s ease-in-out;
 
   input:checked + & {
     background-color: ${p => p.theme.colors.bg1};

browser/data-browser/src/components/Details.tsx

@@ -95,7 +95,8 @@ const IconButton = styled.button<IconButtonProps>`
   align-items: center;
   padding: 0.2rem;
   visibility: ${props => (props.hide ? 'hidden' : 'visible')};
-  transition: transform var(--speed) ease-in-out,
+  transition:
+    transform var(--speed) ease-in-out,
     background-color var(--speed) ease;
   transform: rotate(${props => (props.turn ? '90deg' : '0deg')});
   background-color: transparent;

browser/data-browser/src/components/Dialog/index.tsx

@@ -282,13 +282,15 @@ const StyledDialog = styled.dialog<{ $width?: CSS.Property.Width }>`
   opacity: 0;
   transform: translateY(5rem);
   // Use a transition when animating out (for some reason keyframe animations don't work on outgoing dialog).
-  transition: opacity ${ANIM_SPEED} ease-in-out,
+  transition:
+    opacity ${ANIM_SPEED} ease-in-out,
     transform ${ANIM_SPEED} ease-in-out;
 
   &::backdrop {
     background-color: rgba(0, 0, 0, 0);
     backdrop-filter: blur(0px);
-    transition: background-color ${ANIM_SPEED} ease-out,
+    transition:
+      background-color ${ANIM_SPEED} ease-out,
       backdrop-filter ${ANIM_SPEED} ease-out;
     // Make sure the browser paints the backdrop on another layer so the animation is less expensive.
     will-change: background-color, backdrop-filter;

browser/data-browser/src/components/ExternalLink.tsx

@@ -54,7 +54,11 @@ const ExternalLinkButton = styled.a`
   justify-content: center;
   color: ${props => props.theme.colors.main};
   white-space: nowrap;
-  transition: 0.1s transform, 0.1s background-color, 0.1s box-shadow, 0.1s color;
+  transition:
+    0.1s transform,
+    0.1s background-color,
+    0.1s box-shadow,
+    0.1s color;
 
   &:hover,
   &:focus-within {

browser/data-browser/src/components/IconButton/IconButton.tsx

@@ -137,7 +137,8 @@ const OutlineIconButton = styled(IconButtonBase)<ButtonStyleProps>`
     &:hover,
     &:focus-visible {
       color: ${p => p.theme.colors.main};
-      box-shadow: 0px 0px 0px 1.5px ${p => p.theme.colors.main},
+      box-shadow:
+        0px 0px 0px 1.5px ${p => p.theme.colors.main},
         ${p => p.theme.boxShadowSoft};
     }
   }

browser/data-browser/src/components/NewCard.tsx

@@ -24,7 +24,9 @@ const Thing = styled(GridCard)`
   width: 100%;
   font-size: 3rem;
   color: ${p => p.theme.colors.textLight};
-  transition: color 0.1s ease-in-out, font-size 0.1s ease-out,
+  transition:
+    color 0.1s ease-in-out,
+    font-size 0.1s ease-out,
     border-color 0.1s ease-in-out;
   &:hover,
   &:focus {

browser/data-browser/src/components/Popover.tsx

@@ -112,9 +112,8 @@ const Arrow = styled(RadixPopover.Arrow)`
   fill: ${p => p.theme.colors.bg2};
 `;
 
-const PopoverContainerContext = createContext<RefObject<HTMLDivElement>>(
-  createRef(),
-);
+const PopoverContainerContext =
+  createContext<RefObject<HTMLDivElement>>(createRef());
 
 export const PopoverContainer: FC<PropsWithChildren> = ({ children }) => {
   const popoverContainerRef = useRef<HTMLDivElement>(null);

browser/data-browser/src/components/SideBar/index.tsx

@@ -125,7 +125,9 @@ const SideBarStyled = styled.nav.attrs<SideBarStyledProps>(p => ({
   z-index: ${p => p.theme.zIndex.sidebar};
   box-sizing: border-box;
   background: ${p => p.theme.colors.bg};
-  transition: opacity 0.3s, left 0.3s;
+  transition:
+    opacity 0.3s,
+    left 0.3s;
   left: ${p => (p.exposed ? '0' : `calc(var(--width) * -1 + 0.5rem)`)};
   /* When the user is hovering, show half opacity */
   opacity: ${p => (p.exposed ? 1 : 0)};

browser/data-browser/src/components/TableEditor/ActiveCellIndicator.tsx

@@ -210,7 +210,9 @@ const Indicator = styled.div.attrs<IndicatorProps>(p => ({
   border: 2px solid ${p => p.theme.colors.main};
   pointer-events: none;
   will-change: transform, width;
-  transition: transform var(--speed) ease-out, width var(--speed) ease-out,
+  transition:
+    transform var(--speed) ease-out,
+    width var(--speed) ease-out,
     height var(--speed) ease-out;
   z-index: 1;
   background-color: ${p =>

browser/data-browser/src/components/forms/FilePicker/FIlePickerItem.tsx

@@ -41,7 +41,9 @@ const ItemCard = styled.div`
   touch-action: none;
   pointer-events: none;
   user-select: none;
-  transition: border 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
+  transition:
+    border 0.1s ease-in-out,
+    box-shadow 0.1s ease-in-out;
 `;
 
 const ItemWrapper = styled.button`

browser/data-browser/src/components/forms/FilePicker/FilePickerDialog.tsx

@@ -10,7 +10,7 @@ import { InputStyled, InputWrapper } from '../InputStyles';
 import { FaPlus, FaSearch } from 'react-icons/fa';
 import { core, server, useServerSearch } from '@tomic/react';
 import { styled } from 'styled-components';
-import { FilePickerItem } from './FIlePickerItem';
+import { FilePickerItem } from './FilePickerItem';
 import { Button } from '../../Button';
 import { Row } from '../../Row';
 import { useSettings } from '../../../helpers/AppSettings';

browser/data-browser/src/components/forms/NewForm/CustomCreateActions/CustomForms/NewDriveDialog.tsx

@@ -63,8 +63,8 @@ export const NewDriveDialog: FC<CustomResourceDialogProps> = ({
             parent: resource.subject,
             propVals: {
               [core.properties.shortname]: ontologyName,
-              [core.properties
-                .description]: `Default ontology for the ${name} drive`,
+              [core.properties.description]:
+                `Default ontology for the ${name} drive`,
               [core.properties.classes]: [],
               [core.properties.properties]: [],
               [core.properties.instances]: [],

browser/data-browser/src/components/forms/NewForm/CustomCreateActions/CustomForms/NewTableDialog.tsx

@@ -29,9 +29,8 @@ export const NewTableDialog: FC<NewTableDialogProps> = ({
   onClose,
 }) => {
   const store = useStore();
-  const [useExistingClass, setUseExistingClass] = useState(
-    !!initialExistingClass,
-  );
+  const [useExistingClass, setUseExistingClass] =
+    useState(!!initialExistingClass);
   const [existingClass, setExistingClass] = useState<string | undefined>(
     initialExistingClass,
   );
@@ -52,8 +51,8 @@ export const NewTableDialog: FC<NewTableDialogProps> = ({
         isA: core.classes.class,
         propVals: {
           [core.properties.shortname]: stringToSlug(name),
-          [core.properties
-            .description]: `Represents a row in the ${name} table`,
+          [core.properties.description]:
+            `Represents a row in the ${name} table`,
           [core.properties.recommends]: [core.properties.name],
         },
       });

browser/data-browser/src/components/forms/SearchBox/SearchBox.tsx

@@ -129,16 +129,17 @@ export function SearchBox({
   const openLink =
     !value || selectedResource.error
       ? '#'
-      : constructOpenURL(selectedResource.getSubject());
+      : constructOpenURL(selectedResource.subject);
 
-  const navigateToSelectedResource: MouseEventHandler<HTMLAnchorElement> =
-    e => {
-      e.preventDefault();
-      navigate(openLink);
-    };
+  const navigateToSelectedResource: MouseEventHandler<
+    HTMLAnchorElement
+  > = e => {
+    e.preventDefault();
+    navigate(openLink);
+  };
 
   const title = selectedResource.error
-    ? selectedResource.getSubject()
+    ? selectedResource.subject
     : selectedResource.title;
 
   return (

browser/data-browser/src/views/Card/ResourceCardTitle.tsx

@@ -11,21 +11,22 @@ interface ResourceCardTitleProps {
   resource: Resource;
 }
 
-export const ResourceCardTitle: FC<PropsWithChildren<ResourceCardTitleProps>> =
-  ({ resource, children }) => {
-    const [isA] = useArray(resource, core.properties.isA);
-    const Icon = getIconForClass(isA[0]);
+export const ResourceCardTitle: FC<
+  PropsWithChildren<ResourceCardTitleProps>
+> = ({ resource, children }) => {
+  const [isA] = useArray(resource, core.properties.isA);
+  const Icon = getIconForClass(isA[0]);
 
-    return (
-      <TitleRow center gap='1ch'>
-        <Icon />
-        <AtomicLink subject={resource.getSubject()}>
-          <Title subject={resource.getSubject()}>{resource.title}</Title>
-        </AtomicLink>
-        {children}
-      </TitleRow>
-    );
-  };
+  return (
+    <TitleRow center gap='1ch'>
+      <Icon />
+      <AtomicLink subject={resource.getSubject()}>
+        <Title subject={resource.getSubject()}>{resource.title}</Title>
+      </AtomicLink>
+      {children}
+    </TitleRow>
+  );
+};
 
 const Title = styled.h2<ViewTransitionProps>`
   font-size: 1.4rem;

browser/data-browser/src/views/ClassPage.tsx

@@ -1,13 +1,6 @@
-import {
-  classToTypescriptDefinition,
-  properties,
-  useStore,
-} from '@tomic/react';
-import { useState } from 'react';
+import { core } from '@tomic/react';
 import AllProps from '../components/AllProps';
-import { Button } from '../components/Button';
 import { ClassDetail } from '../components/ClassDetail';
-import { CodeBlock } from '../components/CodeBlock';
 import { ContainerNarrow } from '../components/Containers';
 import { ValueForm } from '../components/forms/ValueForm';
 import { NewInstanceButton } from '../components/NewInstanceButton';
@@ -21,14 +14,14 @@ import { defaultHiddenProps } from './ResourcePageDefault';
  * definition export.
  */
 export function ClassPage({ resource }: ResourcePageProps) {
-  const [tsDef, setTSdef] = useState<string | undefined>(undefined);
-  const store = useStore();
-
   return (
-    <ContainerNarrow about={resource.getSubject()}>
+    <ContainerNarrow about={resource.subject}>
       <Title resource={resource} />
       <ClassDetail resource={resource} />
-      <ValueForm resource={resource} propertyURL={properties.description} />
+      <ValueForm
+        resource={resource}
+        propertyURL={core.properties.description}
+      />
       <Column>
         <AllProps
           resource={resource}
@@ -37,18 +30,9 @@ export function ClassPage({ resource }: ResourcePageProps) {
           columns
         />
         <Row>
-          <NewInstanceButton icon={true} klass={resource.getSubject()} />
-          <Button
-            subtle
-            onClick={async () =>
-              setTSdef(await classToTypescriptDefinition(resource, store))
-            }
-          >
-            typescript interface
-          </Button>
+          <NewInstanceButton icon={true} klass={resource.subject} />
         </Row>
       </Column>
-      {tsDef && <CodeBlock content={tsDef} />}
     </ContainerNarrow>
   );
 }

browser/data-browser/src/views/FolderPage/GridItem/components.tsx

@@ -11,7 +11,9 @@ export const GridCard = styled.div.attrs<ViewTransitionProps>(p => ({
   overflow: hidden;
   box-shadow: var(--shadow), var(--interaction-shadow);
   border: 1px solid ${p => p.theme.colors.bg2};
-  transition: border 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
+  transition:
+    border 0.1s ease-in-out,
+    box-shadow 0.1s ease-in-out;
 `;
 
 export const GridItemWrapper = styled.a`

browser/data-browser/src/views/FolderPage/GridView.tsx

@@ -49,7 +49,9 @@ const NewCard = styled(GridCard)`
   place-items: center;
   font-size: 3rem;
   color: ${p => p.theme.colors.textLight};
-  transition: color 0.1s ease-in-out, font-size 0.1s ease-out,
+  transition:
+    color 0.1s ease-in-out,
+    font-size 0.1s ease-out,
     box-shadow 0.1s ease-in-out;
   ${GridItemWrapper}:hover &,
   ${GridItemWrapper}:focus & {

browser/lib/package.json

@@ -13,32 +13,36 @@
   "devDependencies": {
     "@tomic/cli": "workspace:*",
     "@types/fast-json-stable-stringify": "^2.1.0",
-    "chai": "^4.3.4",
+    "tslib": "^2.4.1",
     "typescript": "^5.4.5",
+    "vite": "^5.2.10",
+    "vite-plugin-dts": "^3.9.0",
+    "vitest": "^0.34.6",
     "whatwg-fetch": "^3.6.2"
   },
   "files": [
     "dist"
   ],
   "gitHead": "2172c73d8df4e5f273e6386676abc91b6c5b2707",
   "license": "MIT",
-  "main": "dist/src/index.js",
+  "main": "dist/index.js",
   "main-dev": "src/index.ts",
   "name": "@tomic/lib",
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "tsc",
+    "build": "pnpm exec vite build",
     "generate-ontologies": "ad-generate ontologies",
     "lint": "eslint ./src --ext .js,.jsx,.ts,.tsx",
     "lint-fix": "eslint ./src --ext .js,.jsx,.ts,.tsx --fix",
     "prepublishOnly": "pnpm run build && pnpm run lint-fix",
     "start": "pnpm watch",
-    "test": "NODE_OPTIONS='--experimental-vm-modules' ../node_modules/jest/bin/jest.js",
+    "coverage": "vitest run --coverage",
+    "test": "vitest run",
     "tsc": "tsc --build",
     "typecheck": "pnpm exec tsc --noEmit",
-    "watch": "tsc --build --watch"
+    "watch": "pnpm exec vite build --watch"
   },
   "source": "src/index.ts",
   "type": "module",