Formatting and Linting Integration with Qwik and Astro Plugins (#43)

.eslintignore

@@ -0,0 +1,38 @@
+**/*.log
+**/.DS_Store
+*.
+.vscode/settings.json
+.history
+.yarn
+bazel-*
+bazel-bin
+bazel-out
+bazel-qwik
+bazel-testlogs
+dist
+dist-dev
+lib
+lib-types
+etc
+external
+node_modules
+temp
+tsc-out
+tsdoc-metadata.json
+target
+output
+rollup.config.js
+build
+.cache
+.vscode
+.rollup.cache
+dist
+tsconfig.tsbuildinfo
+vite.config.ts
+*.spec.tsx
+*.spec.ts
+.netlify
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
+server

.eslintrc.cjs

@@ -0,0 +1,63 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:qwik/recommended",
+    "plugin:astro/recommended",
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ["./tsconfig.json"],
+    ecmaVersion: 2021,
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  plugins: ["@typescript-eslint"],
+  rules: {
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-inferrable-types": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-empty-interface": "off",
+    "@typescript-eslint/no-namespace": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-this-alias": "off",
+    "@typescript-eslint/ban-types": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "prefer-spread": "off",
+    "no-case-declarations": "off",
+    "no-console": "off",
+    "@typescript-eslint/no-unused-vars": ["error"],
+    "@typescript-eslint/consistent-type-imports": "warn",
+    "@typescript-eslint/no-unnecessary-condition": "off",
+  },
+  overrides: [
+    {
+      // Define the configuration for `.astro` file.
+      files: ["*.astro"],
+      processor: "astro/client-side-ts", // <- Uses the "client-side-ts" processor.
+      // Allows Astro components to be parsed.
+      parser: "astro-eslint-parser",
+      // Parse the script in `.astro` as TypeScript by adding the following configuration.
+      // It's the setting you need when using TypeScript.
+      parserOptions: {
+        parser: "@typescript-eslint/parser",
+        extraFileExtensions: [".astro"],
+      },
+      rules: {
+        // override/add rules settings here, such as:
+        // "astro/no-set-html-directive": "error"
+      },
+    },
+    // ...
+  ],
+};

.github/workflows/ci.yml

@@ -0,0 +1,35 @@
+name: CI
+
+permissions:
+  contents: read
+
+on: ["push", "pull_request"]
+
+jobs:
+  ci:
+    runs-on: ${{ matrix.os }}
+    continue-on-error: ${{ matrix.experimental }}
+    strategy:
+      fail-fast: true
+      matrix:
+        os: [ubuntu-latest]
+        node: [20.11]
+        experimental: [false]
+    name: 👷 CI @qwikdev/astro with Node-${{ matrix.node }} under ${{ matrix.os }}
+
+    steps:
+      - name: 🚚 Get latest code
+        uses: actions/checkout@v4
+
+      - name: 🎉 Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: ✨ Install dependencies
+        run: |
+          corepack enable
+          pnpm install
+
+      - name: ✅ Check code style
+        run: pnpm check

.prettierignore

@@ -0,0 +1,37 @@
+**/*.log
+**/.DS_Store
+*.
+.vscode/settings.json
+.history
+.yarn
+bazel-*
+bazel-bin
+bazel-out
+bazel-qwik
+bazel-testlogs
+dist
+dist-dev
+lib
+lib-types
+etc
+external
+node_modules
+temp
+tsc-out
+tsdoc-metadata.json
+target
+output
+rollup.config.js
+build
+.cache
+.vscode
+.rollup.cache
+tsconfig.tsbuildinfo
+vite.config.ts
+*.spec.tsx
+*.spec.ts
+.netlify
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
+server

apps/astro-demo/src/pages/index.astro

@@ -1,7 +1,7 @@
 ---
 import { Counter } from "@components/qwik/counter";
 import { ViewTransitions } from "astro:transitions";
-import { ReactCounter } from "@components/react/react-counter";
+// import { ReactCounter } from "@components/react/react-counter";
 ---
 
 <html lang="en">

apps/astro-demo/tsconfig.json

@@ -3,10 +3,10 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@components/*": ["./src/components/*"]
+      "@components/*": ["./src/components/*"],
     },
 
     "jsx": "react-jsx",
-    "jsxImportSource": "@builder.io/qwik"
-  }
+    "jsxImportSource": "@builder.io/qwik",
+  },
 }

libs/qwikdev-astro/env.d.ts

@@ -1 +1 @@
-/// <reference types="astro/client" />
+/// <reference types="astro/client" />

libs/qwikdev-astro/server.ts

@@ -14,8 +14,8 @@ type RendererContext = {
 async function check(
   this: RendererContext,
   Component: any,
-  props: Record<string, any>,
-  slotted: any
+  // props: Record<string, any>,
+  // slotted: any,
 ) {
   try {
     if (typeof Component !== "function") return false;
@@ -34,7 +34,7 @@ export async function renderToStaticMarkup(
   this: RendererContext,
   Component: any,
   props: Record<string, any>,
-  slotted: any
+  slotted: any,
 ) {
   try {
     if (Component.name !== "QwikComponent") {
@@ -68,7 +68,7 @@ export async function renderToStaticMarkup(
     const symbolMapper: SymbolMapperFn = (symbolName: string) => {
       return [
         symbolName,
-        `/${process.env.SRC_DIR}/` + symbolName.toLocaleLowerCase() + ".js",
+        `/${process.env.SRC_DIR}/${symbolName.toLocaleLowerCase()}.js`,
       ];
     };
 
@@ -164,7 +164,7 @@ export async function renderToStaticMarkup(
     // Insert the scripts before the q:type prefetch bundle script
     const htmlWithScripts = `${html.substring(
       0,
-      prefetchBundleLoc
+      prefetchBundleLoc,
     )}${scripts}${html.substring(prefetchBundleLoc)}`;
 
     return {
@@ -174,7 +174,7 @@ export async function renderToStaticMarkup(
   } catch (error) {
     console.error(
       "Error in renderToStaticMarkup function of @qwikdev/astro: ",
-      error
+      error,
     );
     throw error;
   }

libs/qwikdev-astro/src/index.ts

@@ -17,13 +17,13 @@ export type Options = Partial<{
 }>;
 
 export default function createIntegration(
-  options: Options = {}
+  options: Options = {},
 ): AstroIntegration {
   const filter = createFilter(options.include, options.exclude);
-  let distDir: string = "";
-  let srcDir: string = "";
+  let distDir = "";
+  let srcDir = "";
   let astroConfig: AstroConfig | null = null;
-  let tempDir = join(distDir, ".tmp-" + hash());
+  const tempDir = join(distDir, `.tmp-${hash()}`);
   let entrypoints: Promise<string[]>;
 
   return {
@@ -40,7 +40,8 @@ export default function createIntegration(
          * Because Astro uses the same port for both dev and preview, we need to unregister the SW in order to avoid a stale SW in dev mode.
          */
         if (command === "dev") {
-          const unregisterSW = `navigator.serviceWorker.getRegistration().then((r) => r && r.unregister())`;
+          const unregisterSW =
+            "navigator.serviceWorker.getRegistration().then((r) => r && r.unregister())";
 
           injectScript("head-inline", unregisterSW);
         }
@@ -51,13 +52,13 @@ export default function createIntegration(
         // from the project source directory
         srcDir = relative(
           astroConfig.root.pathname,
-          astroConfig.srcDir.pathname
+          astroConfig.srcDir.pathname,
         );
 
         // used in server.ts for dev mode
         process.env.SRC_DIR = relative(
           astroConfig.root.pathname,
-          astroConfig.srcDir.pathname
+          astroConfig.srcDir.pathname,
         );
 
         entrypoints = getQwikEntrypoints(srcDir, filter);
@@ -163,7 +164,7 @@ export default function createIntegration(
             outputPath = outputPath.substring(3);
           }
 
-          let normalizedPath = normalize(outputPath);
+          const normalizedPath = normalize(outputPath);
           process.env.Q_BASE = normalizedPath;
 
           await moveArtifacts(tempDir, normalizedPath);
@@ -199,7 +200,7 @@ async function crawlDirectory(dir: string): Promise<string[]> {
     entries.map((entry) => {
       const fullPath = join(dir, entry.name);
       return entry.isDirectory() ? crawlDirectory(fullPath) : fullPath;
-    })
+    }),
   );
 
   // flatten files array
@@ -213,7 +214,7 @@ async function crawlDirectory(dir: string): Promise<string[]> {
  */
 async function getQwikEntrypoints(
   dir: string,
-  filter: (id: unknown) => boolean
+  filter: (id: unknown) => boolean,
 ): Promise<string[]> {
   const files = await crawlDirectory(dir);
   const qwikFiles = [];
@@ -229,7 +230,7 @@ async function getQwikEntrypoints(
       file,
       fileContent,
       ts.ScriptTarget.ESNext,
-      true
+      true,
     );
 
     let qwikImportFound = false;

libs/qwikdev-astro/tsconfig.json

@@ -10,8 +10,8 @@
     "baseUrl": ".",
     "paths": {
       "@builder.io/qwik/build": [
-        "node_modules/@builder.io/qwik/build/index.d.ts"
-      ]
-    }
-  }
+        "node_modules/@builder.io/qwik/build/index.d.ts",
+      ],
+    },
+  },
 }