format

Author: amanmahajan7

.github/workflows/ci.yml

@@ -4,12 +4,12 @@ on:
   push:
     branches: [main]
     paths-ignore:
-      - "*.md"
+      - '*.md'
 
   pull_request:
     branches: [main]
     paths-ignore:
-      - "*.md"
+      - '*.md'
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
@@ -33,7 +33,7 @@ jobs:
         run: |
           pnpm install
           npx playwright install-deps chromium
-      
+
       - name: Oxfmt
         run: |
           pnpm format:check

.github/workflows/codeql-analysis.yml

@@ -9,11 +9,11 @@
 # the `language` matrix defined below to confirm you have the correct set of
 # supported CodeQL languages.
 #
-name: "CodeQL"
+name: 'CodeQL'
 
 on:
   schedule:
-    - cron: "39 18 * * 6"
+    - cron: '39 18 * * 6'
 
 jobs:
   analyze:
@@ -27,7 +27,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        language: ["javascript"]
+        language: ['javascript']
         # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
         # Learn more about CodeQL language support at https://git.io/codeql-language-support
 

.releaserc.yml

@@ -2,13 +2,13 @@ branches:
   - main
   - release-action
 plugins:
-  - - "@semantic-release/commit-analyzer"
+  - - '@semantic-release/commit-analyzer'
     - preset: conventionalcommits
-  - "@semantic-release/release-notes-generator"
-  - "@semantic-release/changelog"
-  - - "@semantic-release/git"
+  - '@semantic-release/release-notes-generator'
+  - '@semantic-release/changelog'
+  - - '@semantic-release/git'
     - assets:
         - CHANGELOG.md
-  - - "@semantic-release/npm"
+  - - '@semantic-release/npm'
     - pkgRoot: packages/code-kitchen/dist
-  - "@semantic-release/github"
+  - '@semantic-release/github'

docs/components/MDXPlayground.tsx

@@ -1,22 +1,22 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable react/prop-types */
-import cx from "classnames";
-import { Playground as ReactPlayground, setup } from "code-kitchen";
-import esbuildWasmMeta from "esbuild-wasm/package.json";
-import monacoEditorMeta from "monaco-editor/package.json";
-import React, { useId } from "react";
-import dependencies from "./dependencies";
-import { pre } from "./mdx";
-import { useInitMonaco } from "./use-init-monaco";
+import cx from 'classnames';
+import { Playground as ReactPlayground, setup } from 'code-kitchen';
+import esbuildWasmMeta from 'esbuild-wasm/package.json';
+import monacoEditorMeta from 'monaco-editor/package.json';
+import React, { useId } from 'react';
+import dependencies from './dependencies';
+import { pre } from './mdx';
+import { useInitMonaco } from './use-init-monaco';
 
-const isProd = process.env.NODE_ENV === "production";
+const isProd = process.env.NODE_ENV === 'production';
 
 setup({
   esbuildWasmPath:
-    (isProd ? "/code-kitchen" : "") +
+    (isProd ? '/code-kitchen' : '') +
     `/libs/esbuild-wasm/${esbuildWasmMeta.version}`,
   monacoEditorPath:
-    (isProd ? "/code-kitchen" : "") +
+    (isProd ? '/code-kitchen' : '') +
     `/libs/monaco-editor/${monacoEditorMeta.version}/min`
 });
 
@@ -35,7 +35,7 @@ const customRequire = (key: string) => {
     return res;
   }
 
-  throw new Error("DEP: " + key + " not found");
+  throw new Error('DEP: ' + key + ' not found');
 };
 
 export const Playground = ({
@@ -52,7 +52,7 @@ export const Playground = ({
   name?: string;
   className?: string;
   live?: boolean;
-  dir?: "v" | "h";
+  dir?: 'v' | 'h';
 }) => {
   const hasMounted = useHasMounted();
 
@@ -67,25 +67,25 @@ export const Playground = ({
 
   const files = codeSnippets
     .map((codeSnippet: React.ReactElement, index) => {
-      if (codeSnippet.type !== "pre" && codeSnippet.type !== pre) {
+      if (codeSnippet.type !== 'pre' && codeSnippet.type !== pre) {
         return undefined;
       }
       const { props } = codeSnippet.props.children;
-      const lang = props.className.split("language-")[1];
+      const lang = props.className.split('language-')[1];
 
-      let filename = ""; // path in the folder structure
+      let filename = ''; // path in the folder structure
       let hidden = false; // if the file is available as a tab
 
       if (props.metastring) {
-        const [_filename, ...params] = props.metastring.split(" ");
+        const [_filename, ...params] = props.metastring.split(' ');
         filename = _filename;
-        if (params.includes("hidden")) {
+        if (params.includes('hidden')) {
           hidden = true;
         }
       } else {
         // The first file is always entryfile
-        if (["ts", "tsx", "js", "jsx"].includes(lang) && index === 0) {
-          filename = "App.jsx";
+        if (['ts', 'tsx', 'js', 'jsx'].includes(lang) && index === 0) {
+          filename = 'App.jsx';
         } else {
           throw new Error(
             `Code block is missing a filename: ${props.children}`
@@ -107,7 +107,7 @@ export const Playground = ({
       name={name}
       initialFiles={files}
       require={customRequire}
-      className={cx(className, "my-8 h-[512px] relative")}
+      className={cx(className, 'my-8 h-[512px] relative')}
       live={live}
       dir={dir}
     />

docs/components/dependencies.ts

@@ -1,9 +1,9 @@
-import * as React from "react";
-import * as demoLib from "demo-lib";
+import * as React from 'react';
+import * as demoLib from 'demo-lib';
 
 const dependencies = {
   react: React,
-  "demo-lib": demoLib
+  'demo-lib': demoLib
 };
 
 export default dependencies;

docs/components/mdx.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import * as React from "react";
+import * as React from 'react';
 
 export const h1 = ({ children }) => {
   return (
@@ -43,7 +43,7 @@ export const p = ({ children }) => {
 
 export const ul = ({ children }) => {
   return (
-    <ul className={"font-sans leading-relaxed list-disc pl-10 my-2"}>
+    <ul className={'font-sans leading-relaxed list-disc pl-10 my-2'}>
       {children}
     </ul>
   );

docs/components/use-init-monaco.ts

@@ -1,17 +1,17 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-import { useMonaco } from "code-kitchen";
-import React from "react";
+import { useMonaco } from 'code-kitchen';
+import React from 'react';
 
 let typesLoaded = false;
 
 // Ref
 // https://github1s.com/reactjs/reactjs.org/blob/main/beta/src/components/MDX/Sandpack/index.tsx
 
-const reactTyping = require("!raw-loader?esModule=false!../node_modules/@types/react/index.d.ts");
-const demoLibSrc = require("!raw-loader?esModule=false!../node_modules/demo-lib/index.tsx");
+const reactTyping = require('!raw-loader?esModule=false!../node_modules/@types/react/index.d.ts');
+const demoLibSrc = require('!raw-loader?esModule=false!../node_modules/demo-lib/index.tsx');
 
-const filePrefix = "file:///";
-const typesPrefix = "node_modules/@types";
+const filePrefix = 'file:///';
+const typesPrefix = 'node_modules/@types';
 
 export const useInitMonaco = () => {
   const monaco = useMonaco();

docs/lib/posts.ts

@@ -1,21 +1,21 @@
-import fsp from "fs/promises";
-import remarkGfm from "remark-gfm";
+import fsp from 'fs/promises';
+import remarkGfm from 'remark-gfm';
 
-import { serialize } from "next-mdx-remote/serialize";
+import { serialize } from 'next-mdx-remote/serialize';
 
-import path from "path";
+import path from 'path';
 
-import { codeMetaPlugin } from "./rehype-code-meta";
+import { codeMetaPlugin } from './rehype-code-meta';
 
-const postsDirectory = path.join(process.cwd(), "posts");
+const postsDirectory = path.join(process.cwd(), 'posts');
 
 export async function getPostsData() {
   // Get file names under /posts
   const fileNames = await fsp.readdir(postsDirectory);
   const allPostsData = await Promise.all(
     fileNames.map(async (fileName) => {
       // Remove ".mdx" from file name to get id
-      const id = fileName.replace(/\.mdx$/, "");
+      const id = fileName.replace(/\.mdx$/, '');
 
       // Combine the data with the id
       return {
@@ -30,7 +30,7 @@ export async function getPostsData() {
 
 export async function getPostData(id: string) {
   const fullPath = path.join(postsDirectory, `${id}.mdx`);
-  const source = await fsp.readFile(fullPath, "utf8");
+  const source = await fsp.readFile(fullPath, 'utf8');
 
   const mdxSource = await serialize(source, {
     mdxOptions: {

docs/lib/rehype-code-meta.ts

@@ -1,9 +1,9 @@
-import { visit } from "unist-util-visit";
+import { visit } from 'unist-util-visit';
 
 export const codeMetaPlugin = () => {
   return (tree) => {
-    visit(tree, "element", (node) => {
-      if (node.tagName === "code" && node.data && node.data.meta) {
+    visit(tree, 'element', (node) => {
+      if (node.tagName === 'code' && node.data && node.data.meta) {
         node.properties.metastring = node.data.meta;
       }
     });

docs/lib/rehype-shiki.ts

@@ -1,10 +1,10 @@
 // Credits: https://github.com/mdx-js/mdx/discussions/1939#discussioncomment-2214962
-import rehypeParse from "rehype-parse";
-import * as shiki from "shiki";
-import { unified } from "unified";
-import { visit } from "unist-util-visit";
+import rehypeParse from 'rehype-parse';
+import * as shiki from 'shiki';
+import { unified } from 'unified';
+import { visit } from 'unist-util-visit';
 
-const themes = ["github-light"];
+const themes = ['github-light'];
 
 export const rehypeShiki = () => async (tree) => {
   const highlighter = await shiki.getHighlighter({ themes });
@@ -13,20 +13,20 @@ export const rehypeShiki = () => async (tree) => {
     // If child is pre, but it contains no code
     if (
       !(
-        node.tagName === "pre" &&
-        node.children?.[0]?.tagName === "code" &&
+        node.tagName === 'pre' &&
+        node.children?.[0]?.tagName === 'code' &&
         node.children?.[0]?.properties?.className?.[0].startsWith(
-          "language-"
+          'language-'
         ) &&
-        node.children?.[0]?.children?.[0]?.type === "text"
+        node.children?.[0]?.children?.[0]?.type === 'text'
       )
     ) {
       return;
     }
 
     const code = node.children[0].children[0].value;
     const lang = node.children[0].properties.className[0].slice(
-      "language-".length
+      'language-'.length
     );
 
     parent.children.splice(