✨ Add integration to improve setup and package manager support

Frontendland · Frontendland · commit a19d933dff52 · 2025-08-14T13:04:59.000+02:00
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,6 +1,11 @@
 {
     "svelte.plugin.svelte.compilerWarnings": {},
     "eslint.validate": [
+        "javascript",
+        "javascriptreact",
+        "typescript",
+        "typescriptreact",
+        "astro",
         "svelte"
     ],
     "search.exclude": {
diff --git a/eslint.config.js b/eslint.config.js
@@ -8,6 +8,7 @@ import eslintPluginAstro from 'eslint-plugin-astro'
 import eslintPluginReact from 'eslint-plugin-react'
 import eslintPluginSimpleImportSort from 'eslint-plugin-simple-import-sort'
 import eslintPluginSvelte from 'eslint-plugin-svelte'
+import globals from 'globals'
 import eslintPluginTypeScript from 'typescript-eslint'
 
 export default [
@@ -17,6 +18,12 @@ export default [
     ...eslintPluginAstro.configs.recommended,
     ...eslintPluginTypeScript.configs.recommended,
     {
+        languageOptions: {
+            globals: {
+                ...globals.browser,
+                ...globals.node
+            }
+        },
         plugins: {
             'simple-import-sort': eslintPluginSimpleImportSort
         },
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,7 +8,6 @@
         "dev": "astro dev",
         "build": "astro check && astro build",
         "build:package": "node scripts/build.js",
-        "build:local": "node scripts/build.js --local",
         "compile": "node scripts/sass.js",
         "test": "vitest run && npm run test:sass",
         "test:dev": "vitest",
@@ -51,8 +50,9 @@
         "./astro": "./astro.js",
         "./svelte": "./svelte.js",
         "./react": "./react.js",
-        "./styles": "./scss/index.scss",
         "./icons": "./icons.js",
+        "./integration": "./integration.js",
+        "./styles": "./scss/index.scss",
         "./config": "./scss/config.scss"
     },
     "files": [
@@ -70,6 +70,8 @@
         "react.js",
         "index.js",
         "index.d.ts",
+        "integration.js",
+        "integration.d.ts",
         "README.md",
         "LICENSE"
     ],
diff --git a/scripts/build.js b/scripts/build.js
@@ -1,4 +1,4 @@
-import { buildIconImports,buildImports, buildUtilImports } from './buildImports.js'
+import { buildIconImports, buildImports, buildUtilImports } from './buildImports.js'
 import buildTypes from './buildTypes.js'
 
 import fs from 'fs'
@@ -13,19 +13,10 @@ const folders = {
 const files = {
     'README.md': 'dist/README.md',
     'LICENSE': 'dist/LICENSE',
-    'package.json': 'dist/package.json'
+    'package.json': 'dist/package.json',
+    'src/integration.js': 'dist/integration.js'
 }
 
-const sassConfigEntry = 'dist/scss/config.scss'
-const sassConfigs = [
-    'dist/scss/config/color-palette.scss',
-    'dist/scss/config/css-values.scss',
-    'dist/scss/config/layout.scss',
-    'dist/scss/config/mixins.scss',
-    'dist/scss/config/typography.scss',
-    'dist/scss/config/variables.scss'
-]
-
 console.log('🚀 Preparing package build')
 
 if (!fs.existsSync('dist')) {
@@ -37,24 +28,6 @@ Object.keys(folders).forEach(key => {
         if (error) {
             console.error('🚨 error copying directory', error)
         }
-
-        if (key.includes('scss') && !process.argv[2]) {
-            const configFile = fs.readFileSync(sassConfigEntry, 'utf-8')
-
-            fs.writeFileSync(
-                sassConfigEntry,
-                configFile.replace('webcore.config', '../../../webcore.config')
-            )
-
-            sassConfigs.forEach(config => {
-                const file = fs.readFileSync(config, 'utf-8')
-
-                fs.writeFileSync(
-                    config,
-                    file.replace('webcore.config', '../../../../webcore.config')
-                )
-            })
-        }
     })
 })
 
@@ -89,5 +62,6 @@ fs.writeFileSync('dist/svelte.d.ts', buildTypes('svelte'))
 fs.writeFileSync('dist/react.d.ts', buildTypes('react'))
 fs.writeFileSync('dist/icons.d.ts', buildTypes('icons'))
 fs.writeFileSync('dist/index.d.ts', buildTypes('utils'))
+fs.writeFileSync('dist/integration.d.ts', buildTypes('integration'))
 
 console.log('✅ Package built')
diff --git a/scripts/buildTypes.js b/scripts/buildTypes.js
@@ -1,4 +1,5 @@
 import { getAdditionalTypeExports, getAdditionalTypeImports } from './additionalTypes.js'
+import { integrationTypes } from './integrationTypes.js'
 import { utilityTypes } from './utilityTypes.js'
 
 import fs from 'fs'
@@ -114,6 +115,10 @@ const buildTypes = type => {
     if (type === 'utils') {
         return utilityTypes
     }
+
+    if (type === 'integration') {
+        return integrationTypes
+    }
 }
 
 export default buildTypes
diff --git a/scripts/integrationTypes.js b/scripts/integrationTypes.js
@@ -0,0 +1,9 @@
+export const integrationTypes = `
+import type { AstroIntegration } from 'astro'
+import { Plugin } from 'vite'
+
+declare module 'webcoreui/integration' {
+    export const webcore: () => AstroIntegration
+    export const webcoreVite: () => Plugin
+}
+`
diff --git a/src/components/Alert/alert.ts b/src/components/Alert/alert.ts
@@ -1,3 +1,4 @@
+import type { JSX } from 'react'
 import type { Snippet } from 'svelte'
 
 export type AlertProps = {
diff --git a/src/integration.js b/src/integration.js
@@ -0,0 +1,38 @@
+import path from 'path'
+
+const config = {
+    ssr: {
+        noExternal: ['webcoreui']
+    },
+    css: {
+        preprocessorOptions: {
+            scss: {
+                loadPaths: [
+                    path.resolve(process.cwd())
+                ]
+            }
+        }
+    }
+}
+
+export const webcore = () => {
+    return {
+        name: 'webcoreui',
+        hooks: {
+            'astro:config:setup': ({ updateConfig }) => {
+                updateConfig({
+                    vite: config
+                })
+            }
+        }
+    }
+}
+
+export const webcoreVite = () => {
+    return {
+        name: 'webcoreui',
+        config() {
+            return config
+        }
+    }
+}

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`import { getAdditionalTypeExports, getAdditionalTypeImports } from './additionalTypes.js'`
	`2`	`+import { integrationTypes } from './integrationTypes.js'`
`2`	`3`	`import { utilityTypes } from './utilityTypes.js'`
`3`	`4`
`4`	`5`	`import fs from 'fs'`
`@@ -114,6 +115,10 @@ const buildTypes = type => {`
`114`	`115`	`if (type === 'utils') {`
`115`	`116`	`return utilityTypes`
`116`	`117`	`}`
	`118`	`+`
	`119`	`+ if (type === 'integration') {`
	`120`	`+ return integrationTypes`
	`121`	`+ }`
`117`	`122`	`}`
`118`	`123`
`119`	`124`	`export default buildTypes`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+import type { JSX } from 'react'`
`1`	`2`	`import type { Snippet } from 'svelte'`
`2`	`3`
`3`	`4`	`export type AlertProps = {`