Switch to tsup for package builds + enable noImplicitAny #1018

browser/.gitignore

@@ -6,6 +6,7 @@ publish
 .husky
 .nohup
 .swc
+.tsup
 */lib
 */dist
 */dev-dist
@@ -26,3 +27,9 @@ data-browser/coverage
 !.yarn/versions
 .DS_Store
 **/.trunk/*
+
+**/tomic-lib-**.tgz
+**/tomic-react-**.tgz
+**/tomic-svelte-**.tgz
+**/tomic-cli-**.tgz
+**/tomic-create-template-**.tgz

browser/CHANGELOG.md

@@ -24,6 +24,11 @@ This changelog covers all five packages, as they are (for now) updated as a whol
 - Added `store.preloadResourceTree()` method, see docs for more info.
 - Fix generated ontologies not working in a Next.js server context.
 - SEMI BREAKING CHANGE: When using generated types by cli, @tomic/lib now requires them to be generated by @tomic/cli v0.41.0 or above.
+- Fix types masquerading as esm module in cjs build.
+
+### @tomic/react
+
+- Add cjs build.
 
 ### @tomic/cli
 

browser/cli/package.json

@@ -1,6 +1,14 @@
 {
   "version": "0.40.0",
   "author": "Polle Pas",
+  "homepage": "https://docs.atomicdata.dev/js-cli",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/atomicdata-dev/atomic-server.git"
+  },
+  "bugs": {
+    "url": "https://github.com/atomicdata-dev/atomic-server/issues"
+  },
   "dependencies": {
     "@tomic/lib": "workspace:*",
     "chalk": "^5.3.0",
@@ -9,7 +17,7 @@
   "devDependencies": {
     "typescript": "^5.6.3"
   },
-  "description": "",
+  "description": "Generate types from Atomic Data ontologies",
   "license": "MIT",
   "name": "@tomic/cli",
   "publishConfig": {
@@ -19,7 +27,8 @@
     "build": "tsc",
     "lint": "eslint ./src --ext .js,.ts",
     "lint-fix": "eslint ./src --ext .js,.ts --fix",
-    "prepublishOnly": "pnpm run build && pnpm run lint-fix",
+    "prepublishOnly": "pnpm run build && pnpm run lint && pnpm run lint-package",
+    "lint-package": "pnpm dlx publint",
     "watch": "tsc --build --watch",
     "start": "pnpm watch",
     "tsc": "pnpm exec tsc --build",

browser/create-template/package.json

@@ -1,6 +1,14 @@
 {
   "version": "0.40.0",
   "author": "Polle Pas",
+  "homepage": "https://docs.atomicdata.dev/create-template/atomic-template",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/atomicdata-dev/atomic-server.git"
+  },
+  "bugs": {
+    "url": "https://github.com/atomicdata-dev/atomic-server/issues"
+  },
   "dependencies": {
     "@tomic/lib": "workspace:*",
     "chalk": "^5.3.0",
@@ -20,7 +28,8 @@
     "build": "tsc",
     "lint": "eslint ./src --ext .js,.ts",
     "lint-fix": "eslint ./src --ext .js,.ts --fix",
-    "prepublishOnly": "pnpm run build && pnpm run lint-fix",
+    "prepublishOnly": "pnpm run build && pnpm run lint && pnpm run lint-package",
+    "lint-package": "pnpm dlx publint",
     "watch": "tsc --build --watch",
     "start": "pnpm exec tsc --build --watch",
     "tsc": "pnpm exec tsc --build",

browser/data-browser/src/App.tsx

@@ -1,7 +1,7 @@
 import { BrowserRouter } from 'react-router-dom';
 import { HelmetProvider } from 'react-helmet-async';
 import { StoreContext, Store } from '@tomic/react';
-import { StyleSheetManager } from 'styled-components';
+import { StyleSheetManager, type ShouldForwardProp } from 'styled-components';
 
 import { GlobalStyle, ThemeWrapper } from './styling';
 import { AppRoutes } from './routes/Routes';
@@ -75,15 +75,15 @@ if (isDev()) {
 }
 
 // This implements the default behavior from styled-components v5
-function shouldForwardProp(propName, target) {
+const shouldForwardProp: ShouldForwardProp<'web'> = (propName, target) => {
   if (typeof target === 'string') {
     // For HTML elements, forward the prop if it is a valid HTML attribute
     return isPropValid(propName);
   }
 
   // For other elements, forward all props
   return true;
-}
+};
 
 /** Entrypoint of the application. This is where providers go. */
 function App(): JSX.Element {
@@ -97,11 +97,10 @@ function App(): JSX.Element {
               <HotKeysWrapper>
                 <StyleSheetManager shouldForwardProp={shouldForwardProp}>
                   <ThemeWrapper>
-                    {/* @ts-ignore TODO: Check if types are fixed or upgrade styled-components to 6.0.0 */}
                     <GlobalStyle />
                     {/* @ts-ignore fallback component type too strict */}
                     <ErrBoundary FallbackComponent={CrashPage}>
-                      {/* Default form validation provider. Does not do anyting on its own but will make sure useValidation works without context*/}
+                      {/* Default form validation provider. Does not do anything on its own but will make sure useValidation works without context*/}
                       <FormValidationContextProvider
                         onValidationChange={() => undefined}
                       >

browser/data-browser/src/chunks/CurrencyPicker/processCurrencyFile.ts

@@ -10,7 +10,7 @@ export const processCurrencyFile = (xmlStr: string): string => {
   const parser = new DOMParser();
   const xmlDoc = parser.parseFromString(xmlStr, 'text/xml');
   const currencyNodes = xmlDoc.getElementsByTagName('CcyNtry');
-  const currencyMap = {};
+  const currencyMap: Record<string, string> = {};
 
   for (let i = 0; i < currencyNodes.length; i++) {
     const currencyNode = currencyNodes[i];
@@ -22,7 +22,10 @@ export const processCurrencyFile = (xmlStr: string): string => {
 
     const currencyName =
       currencyNode.getElementsByTagName('CcyNm')[0]?.textContent;
-    currencyMap[code] = currencyName;
+
+    if (currencyName) {
+      currencyMap[code] = currencyName;
+    }
   }
 
   return JSON.stringify(currencyMap);

browser/data-browser/src/chunks/MarkdownEditor/SlashMenu/CommandsExtension.ts

@@ -22,6 +22,7 @@ export const SlashCommands = Extension.create({
     return {
       suggestion: {
         char: '/',
+        // @ts-expect-error Tiptap typing is not very good or clear so they're just any.
         command: ({ editor, range, props }) => {
           props.command({ editor, range });
         },
@@ -46,7 +47,7 @@ export const suggestion: Partial<SuggestionOptions> = {
         icon: FaListUl,
         command: ({ editor, range }) =>
           editor.chain().focus().deleteRange(range).toggleBulletList().run(),
-      },
+      } as CommandItem,
       {
         title: 'Codeblock',
         icon: FaCode,

browser/data-browser/src/components/Dropdown/DefaultTrigger.tsx

@@ -1,6 +1,9 @@
 import { useId } from 'react';
 import { IconButton } from '../IconButton/IconButton';
-import { DropdownTriggerRenderFunction } from './DropdownTrigger';
+import {
+  DropdownTriggerRenderFunction,
+  type DropdownTriggerProps,
+} from './DropdownTrigger';
 
 /** Builds a default trigger for a dropdown menu using an IconButton.
  * Make sure the component stays mounted when the menu is open in order to have proper focus management.
@@ -11,7 +14,7 @@ export const buildDefaultTrigger = (
   ButtonComp: typeof IconButton = IconButton,
 ): DropdownTriggerRenderFunction => {
   const Comp = (
-    { onClick, menuId, isActive },
+    { onClick, menuId, isActive }: DropdownTriggerProps,
     ref: React.Ref<HTMLButtonElement>,
   ) => {
     const id = useId();

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

@@ -42,7 +42,7 @@ export function Searchbar({
     }
   };
 
-  function handleChange(e) {
+  const handleChange: React.ChangeEventHandler<HTMLInputElement> = e => {
     setInput(e.target.value);
 
     try {
@@ -52,9 +52,9 @@ export function Searchbar({
     } catch (_err) {
       navigate(searchURL(e.target.value, scope), { replace: true });
     }
-  }
+  };
 
-  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit: React.FormEventHandler<HTMLFormElement> = event => {
     if (!subject) {
       return;
     }

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

@@ -8,7 +8,7 @@ import {
 } from 'react';
 import { styled } from 'styled-components';
 import { FixedSizeList, ListOnScrollProps } from 'react-window';
-import Autosizer from 'react-virtualized-auto-sizer';
+import Autosizer, { type VerticalSize } from 'react-virtualized-auto-sizer';
 import { Cell, IndexCell } from './Cell';
 import { TableRow } from './TableRow';
 import { TableHeader, TableHeadingComponent } from './TableHeader';
@@ -157,7 +157,7 @@ function FancyTableInner<T>({
   );
 
   const List = useCallback(
-    ({ height }) => (
+    ({ height }: VerticalSize) => (
       <StyledFixedSizeList
         height={height}
         width='100%'
@@ -186,7 +186,6 @@ function FancyTableInner<T>({
       <VisuallyHidden id={ariaUsageId}>
         <p>{ARIA_TABLE_USAGE}</p>
       </VisuallyHidden>
-      {/* @ts-ignore */}
       <Table
         aria-labelledby={labelledBy}
         aria-rowcount={itemCount}
@@ -234,13 +233,12 @@ interface TableProps {
   totalContentHeight: number;
 }
 
-// @ts-ignore
 const Table = styled.div.attrs<TableProps>(p => ({
   style: {
     '--table-template-columns': p.gridTemplateColumns,
     '--table-content-width': p.contentRowWidth,
-  },
-}))<TableProps>`
+  } as Record<string, string>,
+}))`
   --table-height: 80vh;
   --table-row-height: ${p => p.rowHeight}px;
   --table-inner-padding: 0.5rem;
@@ -257,7 +255,6 @@ const Table = styled.div.attrs<TableProps>(p => ({
 
   &:focus-visible {
     outline: none;
-    /* border-color: ${p => p.theme.colors.main}; */
     box-shadow: 0 0 0 2px ${p => p.theme.colors.main};
   }
 `;

browser/data-browser/src/components/Template/ApplyTemplateDialog.tsx

@@ -26,7 +26,7 @@ interface ApplyTemplateDialogProps {
   bindOpen: (open: boolean) => void;
 }
 
-const stableArray = [];
+const stableArray: string[] = [];
 
 export function ApplyTemplateDialog({
   template,

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

@@ -1,4 +1,9 @@
-import toast, { ToastBar, Toaster as ReactHotToast } from 'react-hot-toast';
+import toast, {
+  type Toast,
+  ToastBar,
+  Toaster as ReactHotToast,
+  type Renderable,
+} from 'react-hot-toast';
 import { FaCopy, FaTimes } from 'react-icons/fa';
 import { useTheme } from 'styled-components';
 import { zIndex } from '../styling';
@@ -45,12 +50,27 @@ export function Toaster(): JSX.Element {
   );
 }
 
-function ToastMessage({ icon, message, t }) {
-  let text = message.props.children;
+interface ToastMessageProps {
+  icon: React.ReactNode;
+  message: Renderable;
+  t: Toast;
+}
+
+function ToastMessage({ icon, message, t }: ToastMessageProps) {
+  let text: string;
+
+  if (typeof message === 'string') {
+    text = message;
+  } else if (message && 'props' in message) {
+    // children can technically still be a react node but we never do that in our code so we'll just assume it to be a string.
+    text = message.props.children;
+  } else {
+    text = '';
+  }
 
   function handleCopy() {
     toast.success('Copied error to clipboard');
-    navigator.clipboard.writeText(message.props.children);
+    navigator.clipboard.writeText(text);
     toast.dismiss(t.id);
   }