feat: ✨ update library definition

Author: woldtwerk

packages/vite-plugin-drupal/package.json

@@ -22,7 +22,8 @@
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "types"
   ],
   "engines": {
     "node": ">=18",
@@ -36,6 +37,7 @@
     "@iconify/json": "^2.2.68",
     "@tailwindcss/forms": "^0.5.3",
     "@types/alpinejs": "^3.7.1",
+    "@types/js-cookie": "^3.0.3",
     "@ueberbit/postcss": "workspace:*",
     "@vitejs/plugin-vue": "^3.2.0",
     "@vue/runtime-core": "^3.3.4",

packages/vite-plugin-drupal/src/plugins/libraries.ts

@@ -1,6 +1,6 @@
-import Path from 'path'
-import fs from 'fs/promises'
-import { constants } from 'fs'
+import path from 'node:path'
+import fs from 'node:fs/promises'
+import { constants } from 'node:fs'
 import type { Plugin, ResolvedConfig } from 'vite'
 import YAML from 'yaml'
 import { defu } from 'defu'
@@ -29,10 +29,10 @@ export default function drupalLibraries(ctx: Context): Plugin {
             assetOrChunk.type === 'asset' || (assetOrChunk.type === 'chunk' && assetOrChunk.code !== '\n' && assetOrChunk.isDynamicEntry === false),
         )
         .forEach((assetOrChunk) => {
-          const filename = Path.parse(assetOrChunk.fileName).name
+          const filename = path.parse(assetOrChunk.fileName).name
           const base = filename.split('.')[0]
-          const ext = Path.parse(assetOrChunk.fileName).ext.replace('.', '')
-          const basePath = Path.dirname(assetOrChunk.fileName)
+          const ext = path.parse(assetOrChunk.fileName).ext.replace('.', '')
+          const basePath = path.dirname(assetOrChunk.fileName)
           const lib = `${basePath.match(/^(js|css)$/) ? `${basePath}/` : ''}${base}`
           // const lib = base
 
@@ -62,7 +62,7 @@ export default function drupalLibraries(ctx: Context): Plugin {
                 [`/themes/custom/${ctx.themeName}/dist/${assetOrChunk.fileName}`]: {
                   type: 'external',
                   minified: true,
-                  preprocess: false,
+                  preprocessed: true,
                 },
               },
             })
@@ -77,8 +77,9 @@ export default function drupalLibraries(ctx: Context): Plugin {
             }
             library[lib].js = defu(library[lib].js, {
               [`/themes/custom/${ctx.themeName}/dist/${assetOrChunk.fileName}`]: {
-                type: 'external',
+                type: 'file',
                 minified: true,
+                preprocessed: true,
                 attributes: {
                   crossorigin: {},
                   type: 'module',
@@ -117,10 +118,10 @@ export default function drupalLibraries(ctx: Context): Plugin {
       }
 
       files.forEach(async (file) => {
-        const filename = Path.parse(file).name
-        const ext = Path.parse(file).ext.replace('.', '')
+        const filename = path.parse(file).name
+        const ext = path.parse(file).ext.replace('.', '')
         const proxy = `http://localhost:5173/${file}`
-        const basePath = Path.dirname(file)
+        const basePath = path.dirname(file)
         // const lib = `${basePath}/${filename}`
         const lib = `${basePath.match(/^(js|css)$/) ? `${basePath}/` : ''}${filename}`
         // const lib = filename

packages/vite-plugin-drupal/types/drupal.d.ts

@@ -0,0 +1,120 @@
+/// <reference types="@types/js-cookie" />
+
+export {}
+declare global {
+  const Drupal: Drupal
+  const drupalSettings: Drupal.DrupalSettings
+  const once: <T extends Element>(id: string, selector, context?: Document | Element) => T[]
+  const Cookies: Cookies.CookiesStatic & {
+    noConflict?(): Cookies.CookiesStatic;
+  }
+
+  interface Window {
+    Drupal: Drupal
+    drupalSettings: Drupal.DrupalSettings
+  }
+
+  interface Drupal {
+    Ajax: new (
+      base: string,
+      element: HTMLElement,
+      elementSettings: Drupal.Ajax.ElementSettings
+    ) => Drupal.Ajax
+    AjaxCommands: new () => Drupal.AjaxCommands
+    AjaxError: (
+      xmlhttp: XMLHttpRequest,
+      uri: string,
+      customMessage: string
+    ) => void
+    ajax: (settings: { base: string; element: HTMLElement }) => Drupal.Ajax
+    attachBehaviors: (
+      context: Document | HTMLElement | Element,
+      settings: Drupal.DrupalSettings
+    ) => void
+    behaviors: Record<string, Drupal.Behavior>
+    checkPlain: (str: string) => string
+    debounce: (func: Function, wait: number, immediate: boolean) => Function
+    detachBehaviors: (
+      context?: Document | HTMLElement | Element,
+      settings?: object,
+      trigger?: string
+    ) => void
+    encodePath: (item: string) => string
+    formatPlural: (
+      count: number,
+      singular: string,
+      plural: string,
+      argsopt?: object,
+      optionsopt?: object
+    ) => string
+    formatString: (str: string, args: object) => string
+    stringReplace: (
+      str: string,
+      args: object,
+      keys: Array<any> | null
+    ) => string
+    t: (
+      str: string,
+      args?: Record<string, string>,
+      options?: { context?: string }
+    ) => string
+    throwError: (error: Error | string) => void
+    url: (path: string) => string
+    // Message
+  }
+}
+
+declare namespace Drupal {
+  // Todo.
+  interface Ajax {}
+  // Todo.
+  interface AjaxCommands {}
+
+  type DrupalSettings = Record<string, any>
+  type BehaviorAttach = (
+    context: Document | HTMLElement,
+    settings: object | null
+  ) => void
+  type BehaviorDetach = (
+    context: Document | HTMLElement,
+    settings: object,
+    trigger: string
+  ) => void
+  interface Behavior {
+    attach?: BehaviorAttach
+    detach?: BehaviorDetach
+  }
+
+  export {
+    Ajax,
+    AjaxCommands,
+    Behavior,
+    BehaviorAttach,
+    BehaviorDetach,
+    DrupalSettings,
+  }
+}
+
+declare namespace Drupal.Ajax {
+  interface ElementSettings {
+    url: string
+    event?: string | null
+    keypress?: boolean
+    selector: string | null
+    effect?: string
+    speed?: string | number
+    method?: string
+    progress?: {
+      type?: string
+      message?: string
+    }
+    submit?: {
+      js?: boolean
+    }
+    dialog?: object
+    dialogType?: string
+    prevent?: string
+  }
+
+  export { ElementSettings }
+}