fix: Update package.json for "type": "module" with updated size-limit tests for index.cjs and index.module.js (replacing index.js)

[ghost]

Closes #498
Fixes #495

This would fix #495. This PR specifically is attempting to retry build tests for #498 with most-recent code base, as well as updating the tests run in package.json relating to size-limit and npm run size.

The issues with #498 are solely related to the github action not being able to find index.js. It looks like changing type to module affects the build command (npm run build), such that index.js is no longer output, but index.cjs (for common) and index.module.js (for ES) are output, which in turn affects the size-limit config in package.json (since the output file index.js that the test--npm run size--builds on no longer exists). Updating this test, and including the original change from @greypants in #498, now passes all tests successfully.

This would finally fix the Cannot use import statement outside a module error originally noted in #495 with 100% passing tests.

[ghost]

Original change suggested in #498.

[ghost]

Changing type to module affects the build command in package.json, such that index.js is no longer built to ./dist, but a common js file (index.cjs) and an ES script file (index.module.js) are output instead, so new tests are needed to replace this one (see below).

[ghost]

These new tests reflect the new output files (index.cjs and index.module.js which replace the old output/built file index.js by setting type to module).

[ghost]

@probablyup now that these tests are building, could you take a look at this fix for #495 and possibly close #498 (as this would fix the build issues experienced in #498).

This PR and #498 do the exact same functional changes, this just fixes the build tests as well.

[ghost]

updating main based on the build manager, microbundle's, instructions (https://github.com/developit/microbundle#-installation--setup--)

[ghost]

@probablyup any chance you could take a look at this? It's causing our build pipeline to fail and I'd love to get it working. Thanks!

[ghost]

@probablyup any updates on this?

[ghost]

I can't wait any longer for this; had to switch to a custom solution with react-markdown instead. For anyone else who needs it:

import React from "react";
import { default as ReactMarkdown } from "react-markdown";
import {
  Link,
  List,
  ListItem,
  ListItemText,
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableRow,
  Typography,
  useTheme,
} from "@mui/material";
import remarkGfm from "remark-gfm";
import { default as SyntaxHighlighter } from "react-syntax-highlighter";
import {
  tomorrow as lightHighlightStyle,
  tomorrowNight as darkHighlightStyle,
} from "react-syntax-highlighter/dist/cjs/styles/hljs";
import GlobalStyles from "@mui/material/GlobalStyles";

export default function Markdown({ markdown }: { markdown: string; }) {

  const theme = useTheme();

  return (
    <ReactMarkdown
      remarkPlugins={[remarkGfm]}
      components={{
        // *********
        // * Links *
        // *********
        a: ({ href, title, children }) => (<Link href={href} underline={"always"}>{children}</Link>),

        // ********
        // * Text *
        // ********
        p: ({ children }) => (<Typography sx={{ mt: 1 }}>{children}</Typography>),
        del: ({ children }) => (<Typography sx={{ mt: 1, textDecoration: "line-through" }}>{children}</Typography>),
        em: ({ children }) => (<Typography sx={{ mt: 1, fontStyle: "italic" }}>{children}</Typography>),
        strong: ({ children }) => (<Typography sx={{ mt: 1, fontWeight: "bold" }}>{children}</Typography>),
        b: ({ children }) => (<Typography sx={{ mt: 1, fontWeight: "bold" }}>{children}</Typography>),
        h1: ({ children }) => (<Typography gutterBottom sx={{ mt: 2 }} variant={"h1"}>{children}</Typography>),
        h2: ({ children }) => (<Typography gutterBottom sx={{ mt: 2 }} variant={"h2"}>{children}</Typography>),
        h3: ({ children }) => (<Typography gutterBottom sx={{ mt: 2 }} variant={"h3"}>{children}</Typography>),
        h4: ({ children }) => (<Typography gutterBottom sx={{ mt: 2 }} variant={"h4"}>{children}</Typography>),
        h5: ({ children }) => (<Typography gutterBottom sx={{ mt: 2 }} variant={"h5"}>{children}</Typography>),
        h6: ({ children }) => (<Typography gutterBottom sx={{ mt: 2 }} variant={"h6"}>{children}</Typography>),

        // **********
        // * Tables *
        // **********
        table: ({ children }) => (<TableContainer component={Paper} sx={{ mt: 2 }}>
          <Table size="small">{children}</Table>
        </TableContainer>),
        tbody: ({ children }) => (<TableBody>{children}</TableBody>),
        // th: ({ children }) => (<TableHead>{children}</TableHead>),
        tr: ({ children }) => (<TableRow>{children}</TableRow>),
        td: ({ children }) => (<TableCell><Typography>{children}</Typography></TableCell>),

        // *********
        // * Lists *
        // *********
        ol: ({ children }) => (<List sx={{
          listStyleType: "decimal",
          mt: 2,
          pl: 2,
          "& .MuiListItem-root": {
            display: "list-item",
          },
        }}>{children}</List>),
        ul: ({ children }) => (<List sx={{
          listStyleType: "disc",
          mt: 2,
          pl: 2,
          "& .MuiListItem-root": {
            display: "list-item",
          },
        }}>{children}</List>),
        li: ({ children, ...props }) => (
          <ListItem sx={{ m: 0, p: 0, ml: 2 }} disableGutters {...props}><ListItemText
            sx={{ pl: 0.25 }}>{children}</ListItemText></ListItem>),

        // ********
        // * Code *
        // ********
        code: ({ node, inline, className, children, ...props }) => {
          const match = /language-(\w+)/.exec(className || "");
          return (
            <>
              <GlobalStyles styles={{ code: { color: "inherit", background: "transparent" } }} />
              <SyntaxHighlighter
                style={theme.palette.mode === "light" ? lightHighlightStyle : darkHighlightStyle}
                language={match ? match[1] : undefined}
                PreTag="div"

              >
                {String(children).replace(/\n$/, "")}
              </SyntaxHighlighter>
            </>
          );
        },
      }}
    >
      {markdown}
    </ReactMarkdown>
  );
}

[quantizor]

Apologies for the delay on this, had to make a few more changes.

[quantizor]

Thank you!

[ghost]

@probablyup thanks for getting to this!