Refactored the adastra plugin (#32)

odestry · Mar 27, 2023 · 4172203 · 4172203
1 parent 3e2bebe
commit 4172203
Show file tree

Hide file tree

Showing 21 changed files with 354 additions and 320 deletions.
diff --git a/.changeset/strong-teachers-act.md b/.changeset/strong-teachers-act.md
@@ -0,0 +1,5 @@
+---
+'adastra-plugin': minor
+---
+
+Added extra entries directory and refactored plugin code
diff --git a/packages/adastra-plugin/public/dev-index.html b/packages/adastra-plugin/public/dev-index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
-    <title>Shopify Vite</title>
+    <title>Adastra Plugin</title>
     <style>
       :root {
         --accent: 100 108 255;
@@ -128,109 +128,6 @@
   </head>
   <body>
     <main class="main">
-      <section class="head">
-        <a href="https://shopify.dev/docs/themes">
-          <svg
-            fill="none"
-            viewBox="0 0 39 44"
-            xmlns="http://www.w3.org/2000/svg"
-            class="icon-logo icon-logo--shopify">
-            <path
-              d="M33.962 9.018a.417.417 0 0 0-.379-.35c-.156-.015-3.223-.06-3.223-.06s-2.563-2.49-2.816-2.743c-.254-.254-.747-.177-.941-.122-.004 0-.483.15-1.289.4a8.871 8.871 0 0 0-.618-1.515c-.913-1.743-2.25-2.663-3.865-2.667h-.007c-.111 0-.222.01-.337.021-.049-.055-.094-.115-.146-.167-.705-.753-1.608-1.118-2.688-1.087-2.087.06-4.164 1.567-5.848 4.244-1.188 1.882-2.087 4.25-2.344 6.081-2.396.743-4.074 1.26-4.109 1.271-1.208.379-1.246.417-1.406 1.556C3.824 14.741.66 39.21.66 39.21l26.522 4.588 11.495-2.858c.003.004-4.689-31.703-4.716-31.922Zm-9.978-2.462c-.611.187-1.306.403-2.06.639-.013-1.056-.142-2.528-.635-3.796 1.587.295 2.365 2.087 2.695 3.157ZM20.54 7.622l-4.428 1.372c.427-1.64 1.24-3.272 2.237-4.338.371-.396.889-.84 1.504-1.094.576 1.202.701 2.907.687 4.06ZM17.7 2.114c.489-.01.902.097 1.253.33-.563.292-1.108.712-1.622 1.26-1.326 1.421-2.34 3.63-2.747 5.759l-3.636 1.125c.719-3.348 3.529-8.38 6.751-8.474Z"
-              fill="url(#a)" />
-            <path
-              d="M33.962 9.018a.417.417 0 0 0-.379-.35c-.156-.015-3.223-.06-3.223-.06s-2.563-2.49-2.816-2.743c-.254-.254-.747-.177-.941-.122-.004 0-.483.15-1.289.4a8.871 8.871 0 0 0-.618-1.515c-.913-1.743-2.25-2.663-3.865-2.667h-.007c-.111 0-.222.01-.337.021-.049-.055-.094-.115-.146-.167-.705-.753-1.608-1.118-2.688-1.087-2.087.06-4.164 1.567-5.848 4.244-1.188 1.882-2.087 4.25-2.344 6.081-2.396.743-4.074 1.26-4.109 1.271-1.208.379-1.246.417-1.406 1.556C3.824 14.741.66 39.21.66 39.21l26.522 4.588 11.495-2.858c.003.004-4.689-31.703-4.716-31.922Zm-9.978-2.462c-.611.187-1.306.403-2.06.639-.013-1.056-.142-2.528-.635-3.796 1.587.295 2.365 2.087 2.695 3.157ZM20.54 7.622l-4.428 1.372c.427-1.64 1.24-3.272 2.237-4.338.371-.396.889-.84 1.504-1.094.576 1.202.701 2.907.687 4.06ZM17.7 2.114c.489-.01.902.097 1.253.33-.563.292-1.108.712-1.622 1.26-1.326 1.421-2.34 3.63-2.747 5.759l-3.636 1.125c.719-3.348 3.529-8.38 6.751-8.474Z"
-              fill="#fff"
-              fill-opacity=".1" />
-            <path
-              d="M33.583 8.667c-.156-.014-3.223-.06-3.223-.06s-2.563-2.49-2.816-2.743a.631.631 0 0 0-.358-.163v38.097l11.492-2.858-4.72-31.922a.417.417 0 0 0-.375-.351Z"
-              fill="url(#b)" />
-            <path
-              d="M33.583 8.667c-.156-.014-3.223-.06-3.223-.06s-2.563-2.49-2.816-2.743a.631.631 0 0 0-.358-.163v38.097l11.492-2.858-4.72-31.922a.417.417 0 0 0-.375-.351Z"
-              fill="#fff"
-              fill-opacity=".4" />
-            <path
-              d="m20.817 14.577-1.334 4.994s-1.49-.677-3.254-.566c-2.587.164-2.615 1.796-2.59 2.206.142 2.233 6.018 2.722 6.348 7.952.26 4.116-2.184 6.932-5.702 7.154-4.223.268-6.55-2.226-6.55-2.226l.896-3.81s2.34 1.768 4.216 1.647c1.222-.077 1.66-1.073 1.618-1.778-.184-2.914-4.97-2.744-5.272-7.53-.253-4.028 2.393-8.112 8.231-8.48 2.24-.136 3.393.437 3.393.437Z"
-              fill="#fff" />
-            <defs>
-              <radialGradient
-                cx="0"
-                cy="0"
-                gradientTransform="matrix(45.33948 79.2891 -71.42537 40.84281 -10.388 -22.088)"
-                gradientUnits="userSpaceOnUse"
-                id="a"
-                r="1">
-                <stop stop-color="#CEF141" />
-                <stop offset=".586" stop-color="#79D7EC" />
-                <stop offset="1" stop-color="#130FD7" />
-              </radialGradient>
-              <radialGradient
-                cx="0"
-                cy="0"
-                gradientTransform="rotate(-98.682 37.062 9.771) scale(91.0466 41.9746)"
-                gradientUnits="userSpaceOnUse"
-                id="b"
-                r="1">
-                <stop stop-color="#130FD7" />
-                <stop offset=".428" stop-color="#21C9AB" />
-                <stop offset=".915" stop-color="#CEF141" />
-              </radialGradient>
-            </defs>
-          </svg>
-        </a>
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          aria-hidden="true"
-          class="icon-plus"
-          fill="none"
-          viewBox="0 0 10 10">
-          <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
-            d="M1 4.51a.5.5 0 0 0 0 1h3.5l.01 3.5a.5.5 0 0 0 1-.01V5.5l3.5-.01a.5.5 0 0 0-.01-1H5.5L5.49.99a.5.5 0 0 0-1 .01v3.5l-3.5.01H1z"
-            fill="currentColor" />
-        </svg>
-        <a href="https://vitejs.dev/">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            xmlns:xlink="http://www.w3.org/1999/xlink"
-            aria-hidden="true"
-            role="img"
-            class="icon-logo"
-            width="31.88"
-            height="32"
-            preserveAspectRatio="xMidYMid meet"
-            viewBox="0 0 256 257">
-            <defs>
-              <linearGradient
-                id="IconifyId1813088fe1fbc01fb466"
-                x1="-.828%"
-                x2="57.636%"
-                y1="7.652%"
-                y2="78.411%">
-                <stop offset="0%" stop-color="#41D1FF"></stop>
-                <stop offset="100%" stop-color="#BD34FE"></stop>
-              </linearGradient>
-              <linearGradient
-                id="IconifyId1813088fe1fbc01fb467"
-                x1="43.376%"
-                x2="50.316%"
-                y1="2.242%"
-                y2="89.03%">
-                <stop offset="0%" stop-color="#FFEA83"></stop>
-                <stop offset="8.333%" stop-color="#FFDD35"></stop>
-                <stop offset="100%" stop-color="#FFA800"></stop>
-              </linearGradient>
-            </defs>
-            <path
-              fill="url(#IconifyId1813088fe1fbc01fb466)"
-              d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path>
-            <path
-              fill="url(#IconifyId1813088fe1fbc01fb467)"
-              d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path>
-          </svg>
-        </a>
-      </section>
       <section class="content">
         <p>
           This is the Vite development server that provides Hot Module
@@ -246,16 +143,6 @@
           and the <code>shopify theme dev</code> command.
         </p>
       </section>
-      <section class="footer">
-        <p>
-          Want more information on this Shopify Vite integration?
-          <br />
-          <a
-            href="https://github.com/barrel/barrel-shopify/tree/main/packages/vite-plugin-shopify"
-            >Read the docs →</a
-          >
-        </p>
-      </section>
     </main>
   </body>
 </html>
diff --git a/packages/adastra-plugin/src/constants.ts b/packages/adastra-plugin/src/constants.ts
@@ -1,3 +1,4 @@
+// Array of known CSS file extensions
 export const KNOWN_CSS_EXTENSIONS = [
   'css',
   'less',
@@ -9,11 +10,16 @@ export const KNOWN_CSS_EXTENSIONS = [
   'postcss'
 ]
 
+// Array of known JSX file extensions
 export const KNOWN_JSX_EXTENSIONS = ['jsx', 'tsx']
 
+// Regular expression to match CSS file extensions
 export const CSS_EXTENSIONS_REGEX = new RegExp(
   `\\.(${KNOWN_CSS_EXTENSIONS.join('|')})(\\?.+)?$`
 )
 
+// Path to the Vite client script
 export const CLIENT_SCRIPT_PATH = '@vite/client'
+
+// Path to the React Refresh runtime
 export const CLIENT_REACT_REFRESH_PATH = '@react-refresh'
diff --git a/packages/adastra-plugin/src/index.ts b/packages/adastra-plugin/src/index.ts
@@ -1,18 +1,26 @@
 import { Plugin } from 'vite'
 
-import type { PluginAdastraOptions } from './types'
+import type { AdastraPluginOptions } from './types'
 import { resolveOptions } from './options'
 import adastraConfigPlugin from './plugins/vite-plugin-adastra-config'
 import adastraLiquidPlugin from './plugins/vite-plugin-adastra-liquid'
 import emptyAdastraConfig from './utilities/empty-adastra-config'
 
-export default (
-  options: PluginAdastraOptions = emptyAdastraConfig
-): Plugin[] => {
+/**
+ * Returns an array of plugins for the Adastra plugin with the provided options.
+ *
+ * @param options - The Adastra plugin options.
+ * @returns An array of Vite plugins.
+ */
+export default function createAdastraPlugins(
+  options: AdastraPluginOptions = emptyAdastraConfig
+): Plugin[] {
   const resolvedOptions = resolveOptions(options)
+
   return [
     // Apply plugin for configuring Vite settings and options
     adastraConfigPlugin(resolvedOptions),
+
     // Apply plugin for generating Vite and liquid asset tags through adastra.liquid snippet
     adastraLiquidPlugin(resolvedOptions)
   ]

diff --git a/packages/adastra-plugin/src/options.ts b/packages/adastra-plugin/src/options.ts
@@ -1,24 +1,23 @@
 import path from 'path'
 import type {
-  PluginAdastraOptions,
+  AdastraPluginOptions,
   ResolvedAdastraPluginOptions
 } from './types'
 
-export const resolveOptions = (
-  options: PluginAdastraOptions
-): ResolvedAdastraPluginOptions => {
-  const root = options.root ?? './'
-  const sourceDir = options.sourceDir ?? 'src'
-  const entrypointsDir = path.join(
-    sourceDir,
-    options.entrypointsDir ?? 'entrypoints'
-  )
-  const snippetName = options.snippetName ?? 'adastra'
+export const resolveOptions = ({
+  root = './',
+  sourceDir = 'src',
+  entrypointsDir = 'entrypoints',
+  additionalEntrypoints = [],
+  snippetName = 'adastra'
+}: AdastraPluginOptions): ResolvedAdastraPluginOptions => {
+  const resolvedEntrypointsDir = path.join(sourceDir, entrypointsDir)
 
   return {
     root,
     sourceDir,
-    entrypointsDir,
+    entrypointsDir: resolvedEntrypointsDir,
+    additionalEntrypoints,
     snippetName
   }
 }
diff --git a/packages/adastra-plugin/src/plugins/vite-plugin-adastra-config.ts b/packages/adastra-plugin/src/plugins/vite-plugin-adastra-config.ts
@@ -5,11 +5,17 @@ import createDebugger from 'debug'
 import { Plugin, UserConfig, mergeConfig, normalizePath } from 'vite'
 import type { ResolvedAdastraPluginOptions } from '../types'
 
-const debug = createDebugger(`adastra-plugin:config`)
+const debug = createDebugger('adastra-plugin:config')
 
+/**
+ * Create the Adastra configuration plugin.
+ *
+ * @param options - The resolved Adastra plugin options.
+ * @returns The Vite plugin with the Adastra configuration.
+ */
 export default (options: ResolvedAdastraPluginOptions): Plugin => {
   return {
-    name: `adastra-plugin-config`,
+    name: 'adastra-plugin-config',
     config(config: UserConfig): UserConfig {
       const host = config.server?.host ?? 'localhost'
       const port = config.server?.port ?? 5173
@@ -19,50 +25,73 @@ export default (options: ResolvedAdastraPluginOptions): Plugin => {
       const socketProtocol = https === true ? 'wss' : 'ws'
 
       const input = glob.sync(
-        normalizePath(path.join(options.entrypointsDir, '**/*')),
+        [
+          normalizePath(path.join(options.entrypointsDir, '**/*')),
+          ...options.additionalEntrypoints
+        ],
         { onlyFiles: true }
       )
 
+      const defaultAliases: Record<string, string> = {
+        '~': path.resolve(options.sourceDir),
+        '@': path.resolve(options.sourceDir)
+      }
+
       const generatedConfig: UserConfig = {
-        // Use relative base path so to load imported assets from Shopify CDN
-        base: './',
-        envPrefix: ['VITE_', 'PUBLIC_', 'ADASTRA_'],
-        publicDir: false,
+        // Use relative base path to load imported assets from Shopify CDN
+        base: config.base ?? './',
+        envPrefix: config.envPrefix ?? ['VITE_', 'PUBLIC_', 'ADASTRA_'],
+        publicDir: config.publicDir ?? false,
         build: {
           // Output files to "assets" directory
-          outDir: path.join(options.root, 'assets'),
+          outDir: config.build?.outDir ?? path.join(options.root, 'assets'),
           modulePreload: {
             polyfill: true
           },
           // Do not use subfolder for static assets
-          assetsDir: '',
+          assetsDir: config.build?.assetsDir ?? '',
           // Configure bundle entry points
           rollupOptions: {
             input
           },
           // Output manifest file for backend integration
-          manifest: `adastra.manifest.json`
+          manifest: config.build?.manifest ?? 'adastra.manifest.json'
         },
         resolve: {
           // Provide import alias to source code dir for convenience
-          alias: {
-            '~': path.resolve(options.sourceDir),
-            '@': path.resolve(options.sourceDir)
-          }
+          alias: Array.isArray(config.resolve?.alias)
+            ? [
+                ...(config.resolve?.alias ?? []),
+                ...Object.keys(defaultAliases).map(alias => ({
+                  find: alias,
+                  replacement: defaultAliases[alias]
+                }))
+              ]
+            : {
+                ...defaultAliases,
+                ...config.resolve?.alias
+              }
         },
         server: {
           host,
           https,
           port,
           origin,
-          strictPort: true,
-          hmr: {
-            host: host as string,
-            port,
-            protocol: socketProtocol
-          },
+          strictPort: config.server?.strictPort ?? true,
+          hmr:
+            config.server?.hmr === false
+              ? false
+              : {
+                  host: typeof host === 'string' ? host : undefined,
+                  port,
+                  protocol: socketProtocol,
+                  ...(config.server?.hmr === true ? {} : config.server?.hmr)
+                },
           watch: {
-            ignored: ['assets/*', `snippets/${options.snippetName}.liquid`]
+            ignored: config.server?.watch?.ignored ?? [
+              'assets/*',
+              `snippets/${options.snippetName}.liquid`
+            ] // Ignore assets and snippet files
           }
         }
       }