From cfa0576f5d12c462272589cde77e644d18b3b3d9 Mon Sep 17 00:00:00 2001
From: Dev By Ray <6241164+devbyray@users.noreply.github.com>
Date: Tue, 1 Apr 2025 16:12:35 +0200
Subject: [PATCH 01/13] docs: update README to clarify library usage and
framework compatibility
---
README.md | 16 ++++++++++++++++
1 file changed, 16 insertions(+)
diff --git a/README.md b/README.md
index 208808d..775d1cf 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,22 @@
A Vue-based accessible design system with headless web components. This library provides accessible, customizable components that can be imported individually to optimize bundle size.
+> This library is WIP (Work-In-Progress)
+
+## Is This Library Right For You?
+
+This library is framework agnostic at the component level, but requires Vue.js as a dependency to function. Consider this library if:
+
+- Your application doesn't have a framework yet and you're looking for a solid foundation to build on
+- Your application is already built with Vue.js and you need consistent, accessible components
+- You want to use the same components across multiple projects with different technologies
+
+Note that if your main application uses React, Angular, or another non-Vue framework, you might want to consider a framework-specific component library instead for better integration:
+
+- For **React** applications: [shadcn/ui](https://ui.shadcn.com/) offers beautifully designed components that you can copy and paste into your apps
+- For **Angular** applications: [Angular Material](https://material.angular.io/) provides a comprehensive suite of UI components following Material Design principles
+
+
## Features
- 🧩 **Web Components**: Use anywhere, framework-agnostic
From 19b3390c58c1be6d3b6dbf5fb76046835fbd6ab4 Mon Sep 17 00:00:00 2001
From: Dev By Ray <6241164+devbyray@users.noreply.github.com>
Date: Tue, 1 Apr 2025 16:12:48 +0200
Subject: [PATCH 02/13] docs: update README to indicate the library is a
Work-In-Progress (WIP)
---
README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/README.md b/README.md
index 775d1cf..76f14a5 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Vue Web Component Library
+# Vue Web Component Library (WIP)
A Vue-based accessible design system with headless web components. This library provides accessible, customizable components that can be imported individually to optimize bundle size.
From 4a964d3ed034391bb314e2d89dbc6c4dffe932a6 Mon Sep 17 00:00:00 2001
From: Dev By Ray <6241164+devbyray@users.noreply.github.com>
Date: Tue, 1 Apr 2025 16:20:38 +0200
Subject: [PATCH 03/13] docs: update component details for clarity and
accessibility
---
apps/documentation/index.md | 8 +++++---
1 file changed, 5 insertions(+), 3 deletions(-)
diff --git a/apps/documentation/index.md b/apps/documentation/index.md
index aca4404..b78739c 100644
--- a/apps/documentation/index.md
+++ b/apps/documentation/index.md
@@ -13,11 +13,13 @@ hero:
features:
- title: Button component
link: /docs/components/button
- details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+ details: A versatile button component with support for different styles, sizes, and states to enhance user interactions.
+
- title: Input component
link: /docs/components/input
- details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+ details: A customizable input field component designed for accessibility and seamless data entry.
+
- title: Icon component
link: /docs/components/icon
- details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+ details: A library of scalable and accessible icons to complement your design system.
---
From 14ea73b24187bfbbacfa80b993ea6a1fb24ed1d8 Mon Sep 17 00:00:00 2001
From: Dev By Ray <6241164+devbyray@users.noreply.github.com>
Date: Tue, 1 Apr 2025 16:46:00 +0200
Subject: [PATCH 04/13] feat(docs): add ComponentExample for interactive
component demos
---
apps/documentation/.vitepress/theme/index.js | 4 +
apps/documentation/.vitepress/theme/style.css | 2 +-
.../components/ComponentExample.vue | 226 ++++++++++++++++++
apps/documentation/docs/components/button.md | 7 +
apps/documentation/docs/components/icon.md | 7 +
apps/documentation/docs/components/index.md | 2 +
apps/documentation/docs/components/input.md | 7 +
apps/documentation/index.md | 19 ++
apps/documentation/package.json | 1 +
pnpm-lock.yaml | 3 +
10 files changed, 277 insertions(+), 1 deletion(-)
create mode 100644 apps/documentation/components/ComponentExample.vue
diff --git a/apps/documentation/.vitepress/theme/index.js b/apps/documentation/.vitepress/theme/index.js
index 1d35d0f..91c52f8 100644
--- a/apps/documentation/.vitepress/theme/index.js
+++ b/apps/documentation/.vitepress/theme/index.js
@@ -2,7 +2,9 @@
import { h } from 'vue'
import DefaultTheme from 'vitepress/theme'
import MarkdownImporter from '../../components/MarkdownImporter.vue'
+import ComponentExample from '../../components/ComponentExample.vue'
import './style.css'
+import '@devbyray/vue-wc-components'
/** @type {import('vitepress').Theme} */
export default {
@@ -15,5 +17,7 @@ export default {
enhanceApp({ app, router, siteData }) {
// ...
app.component('MarkdownImporter', MarkdownImporter)
+ app.component('ComponentExample', ComponentExample)
+
}
}
diff --git a/apps/documentation/.vitepress/theme/style.css b/apps/documentation/.vitepress/theme/style.css
index 1a61cb1..a608733 100644
--- a/apps/documentation/.vitepress/theme/style.css
+++ b/apps/documentation/.vitepress/theme/style.css
@@ -42,7 +42,7 @@
* - `danger`: Used to show error, or dangerous message to the users. Used
* in custom container, badges, etc.
* -------------------------------------------------------------------------- */
-
+ @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded');
:root {
--vp-c-default-1: var(--vp-c-gray-1);
--vp-c-default-2: var(--vp-c-gray-2);
diff --git a/apps/documentation/components/ComponentExample.vue b/apps/documentation/components/ComponentExample.vue
new file mode 100644
index 0000000..b24dd04
--- /dev/null
+++ b/apps/documentation/components/ComponentExample.vue
@@ -0,0 +1,226 @@
+
+
+
+
{{ title }}
+
+
+
+
+
+
+
+ Render
+
+
+
{{ currentCode }}
+
+
+
+
+
\ No newline at end of file
diff --git a/apps/documentation/docs/components/button.md b/apps/documentation/docs/components/button.md
index 6832e04..832a11c 100644
--- a/apps/documentation/docs/components/button.md
+++ b/apps/documentation/docs/components/button.md
@@ -1 +1,8 @@
+
+ Primary Button
+
+
\ No newline at end of file
diff --git a/apps/documentation/docs/components/icon.md b/apps/documentation/docs/components/icon.md
index 52a7a79..9a3e420 100644
--- a/apps/documentation/docs/components/icon.md
+++ b/apps/documentation/docs/components/icon.md
@@ -1 +1,8 @@
+
+
+
+
\ No newline at end of file
diff --git a/apps/documentation/docs/components/index.md b/apps/documentation/docs/components/index.md
index d796870..c369c02 100644
--- a/apps/documentation/docs/components/index.md
+++ b/apps/documentation/docs/components/index.md
@@ -1 +1,3 @@
+# Components
+
\ No newline at end of file
diff --git a/apps/documentation/docs/components/input.md b/apps/documentation/docs/components/input.md
index 3c9cfee..710f803 100644
--- a/apps/documentation/docs/components/input.md
+++ b/apps/documentation/docs/components/input.md
@@ -1 +1,8 @@
+
+
+
+
\ No newline at end of file
diff --git a/apps/documentation/index.md b/apps/documentation/index.md
index b78739c..2e1982c 100644
--- a/apps/documentation/index.md
+++ b/apps/documentation/index.md
@@ -23,3 +23,22 @@ features:
link: /docs/components/icon
details: A library of scalable and accessible icons to complement your design system.
---
+
+
+
+
Try our Button component
+
+ Click Me
+
+
+
+
diff --git a/apps/documentation/package.json b/apps/documentation/package.json
index 2e22c7b..7790d83 100644
--- a/apps/documentation/package.json
+++ b/apps/documentation/package.json
@@ -14,6 +14,7 @@
"vitepress": "^1.6.3"
},
"dependencies": {
+ "@devbyray/vue-wc-components": "workspace:^",
"highlight.js": "^11.11.1"
}
}
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0131e18..17984c4 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -57,6 +57,9 @@ importers:
apps/documentation:
dependencies:
+ '@devbyray/vue-wc-components':
+ specifier: workspace:^
+ version: link:../../packages/components
highlight.js:
specifier: ^11.11.1
version: 11.11.1
From bf7d0e9040d74647e299ead0774c20225b64cfd3 Mon Sep 17 00:00:00 2001
From: Dev By Ray <6241164+devbyray@users.noreply.github.com>
Date: Tue, 1 Apr 2025 17:42:15 +0200
Subject: [PATCH 05/13] feat(docs): update examples and enhance
MarkdownImporter for better syntax highlighting
---
.../components/ComponentExample.vue | 230 ++++++++++++++++--
.../components/MarkdownImporter.vue | 96 +++++---
apps/documentation/docs/components/button.md | 7 +-
apps/documentation/docs/components/index.md | 35 +++
4 files changed, 314 insertions(+), 54 deletions(-)
diff --git a/apps/documentation/components/ComponentExample.vue b/apps/documentation/components/ComponentExample.vue
index b24dd04..c1f1a7b 100644
--- a/apps/documentation/components/ComponentExample.vue
+++ b/apps/documentation/components/ComponentExample.vue
@@ -1,5 +1,5 @@
@@ -112,28 +210,63 @@ watch(previewContainer, (el) => {
+
+
+
+ Render Changes
+
+
+
+
+
+
+ HTML
+
+
+ CSS
+
+
-
+
+
-
-
-
- Render
-
-
{{ currentCode }}
+
+
+
+
+
+
+
+
{{ currentCode }}
@@ -142,30 +275,80 @@ watch(previewContainer, (el) => {
.component-example {
margin: 20px 0;
}
+
+.example-tabs {
+ display: flex;
+ border-start-end-radius: 5px;
+ border-start-start-radius: 5px;
+ overflow: hidden;
+ border: 1px solid #ccc;
+ border-bottom: none;
+}
+
+.tab-button {
+ flex: 1;
+ padding: 0.5rem 1rem;
+ background-color: #3d3d3d;
+ color: #e6e6e6;
+ border: none;
+ cursor: pointer;
+ font-size: 0.875rem;
+ transition: background-color 0.2s;
+}
+
+.tab-button:hover {
+ background-color: #4a4a4a;
+}
+
+.tab-button.active {
+ background-color: #5f5f5f;
+ font-weight: bold;
+}
+
.example-code {
padding: 10px;
- border-end-end-radius: 5px;
- border-end-start-radius: 5px;
+ border-bottom-right-radius: 5px;
+ border-bottom-left-radius: 5px;
margin-bottom: 20px;
background-color: #5f5f5f;
border: 1px solid #ccc;
+ border-top: none;
+}
+
+.example-tabs + .example-code {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
}
+
.example-code pre {
margin: 0;
font-size: 14px;
line-height: 1.5;
}
+
+.render-button-preview {
+ position: absolute;
+ bottom: 10px;
+ right: 10px;
+ margin-top: 0;
+ background-color: rgba(137, 255, 18, 0.9);
+ backdrop-filter: blur(4px);
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+}
+
.example-preview {
+ position: relative;
padding: 10px;
border: 1px solid #ccc;
- border-start-end-radius: 5px;
- border-start-start-radius: 5px;
+ border-radius: 5px;
+ margin-bottom: 10px;
aspect-ratio: 16/9;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
+
.example-preview > * {
margin: 0;
}
@@ -207,7 +390,7 @@ watch(previewContainer, (el) => {
.render-button {
margin-top: 10px;
padding: 8px 16px;
- background-color: #4a8bfc;
+ background-color: rgba(137, 255, 18, 0.9);
color: white;
border: none;
border-radius: 4px;
@@ -217,10 +400,11 @@ watch(previewContainer, (el) => {
}
.render-button:hover {
- background-color: #3a7bec;
+ background-color: rgba(102, 203, 1, 0.9);
}
.render-button:active {
- background-color: #2a6bdc;
+ background-color: rgba(137, 255, 18, 0.9);
+ transform: scale(0.98);
}
\ No newline at end of file
diff --git a/apps/documentation/components/MarkdownImporter.vue b/apps/documentation/components/MarkdownImporter.vue
index 84ab663..aaad8d6 100644
--- a/apps/documentation/components/MarkdownImporter.vue
+++ b/apps/documentation/components/MarkdownImporter.vue
@@ -57,53 +57,74 @@ const fetchMarkdown = async (path) => {
}
}
-// Function to apply syntax highlighting after the content is rendered
+// Function to safely apply syntax highlighting
const applySyntaxHighlighting = () => {
// Select all code blocks
const codeBlocks = document.querySelectorAll('.markdown-content pre code')
// Apply highlighting to each code block
codeBlocks?.forEach((block) => {
- // Make sure block has a className property
- if (!block || typeof block.className !== 'string') {
+ // Make sure block exists and has content
+ if (!block || !block.textContent) {
return
}
- // Check if a language class is present
- const classList = block.className.split(' ')
- const langClass = classList.find(cls => typeof cls === 'string' && cls.startsWith('language-'))
-
- if (langClass) {
- // Extract the language name
- const lang = typeof langClass === 'string' ? langClass.replace('language-', '') : ''
+ try {
+ // Check if a language class is present
+ const classList = block.className ? block.className.split(' ') : []
+ const langClass = classList.find(cls => typeof cls === 'string' && cls.startsWith('language-'))
- // Apply highlighting if the language is supported
- if (lang && hljs.getLanguage(lang)) {
- hljs.highlightElement(block)
+ if (langClass) {
+ // Extract the language name
+ const lang = langClass.replace('language-', '')
+
+ // Apply highlighting if the language is supported
+ if (lang && hljs.getLanguage(lang)) {
+ hljs.highlightElement(block)
+ } else {
+ // Only apply auto-detection if we have content
+ if (block.textContent.trim()) {
+ hljs.highlightElement(block)
+ }
+ }
} else {
- // Try auto-detection for unknown languages
- hljs.highlightAuto(block)
+ // Only apply auto-detection if we have content
+ if (block.textContent.trim()) {
+ hljs.highlightElement(block)
+ }
}
- } else {
- // No language specified, use auto-detection
- hljs.highlightAuto(block)
+ } catch (error) {
+ // Log the error but don't break the rendering
+ console.warn('Error highlighting code block:', error)
+
+ // Apply basic styling if highlighting fails
+ block.classList.add('plain-code')
}
})
}
onMounted(async () => {
- // Get the base URL
- const baseUrl = import.meta.env.BASE_URL || '/'
- // Create a path that's relative to the public directory
- const fullPath = `${baseUrl}${props.path}`
-
- // Fetch and process the markdown
- const markdownContent = await fetchMarkdown(fullPath)
- htmlContent.value = marked.parse(markdownContent)
-
- // Use nextTick to ensure the content is in the DOM before highlighting
- await nextTick()
- applySyntaxHighlighting()
+ try {
+ // Get the base URL
+ const baseUrl = import.meta.env.BASE_URL || '/'
+ // Create a path that's relative to the public directory
+ const fullPath = `${baseUrl}${props.path}`
+
+ // Fetch and process the markdown
+ const markdownContent = await fetchMarkdown(fullPath)
+
+ // Only parse if we have content
+ if (markdownContent && typeof markdownContent === 'string') {
+ htmlContent.value = marked.parse(markdownContent)
+
+ // Use nextTick to ensure the content is in the DOM before highlighting
+ await nextTick()
+ applySyntaxHighlighting()
+ }
+ } catch (error) {
+ console.error('Error rendering markdown:', error)
+ htmlContent.value = 'Error loading content
'
+ }
})
@@ -175,4 +196,19 @@ onMounted(async () => {
color: #ddd;
}
}
+
+/* Style for error messages */
+.error-message {
+ color: #e74c3c;
+ padding: 1rem;
+ border: 1px solid #e74c3c;
+ border-radius: 4px;
+ background-color: rgba(231, 76, 60, 0.1);
+ margin: 1rem 0;
+}
+
+/* Style for plain code when highlighting fails */
+.plain-code {
+ color: #e6e6e6;
+}
\ No newline at end of file
diff --git a/apps/documentation/docs/components/button.md b/apps/documentation/docs/components/button.md
index 832a11c..d6b3037 100644
--- a/apps/documentation/docs/components/button.md
+++ b/apps/documentation/docs/components/button.md
@@ -1,6 +1,11 @@
Primary Button
diff --git a/apps/documentation/docs/components/index.md b/apps/documentation/docs/components/index.md
index c369c02..28aef24 100644
--- a/apps/documentation/docs/components/index.md
+++ b/apps/documentation/docs/components/index.md
@@ -1,3 +1,38 @@
# Components
+
+ Primary Button
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
From 88181b1be6c912d096ad05d88be311399733eafe Mon Sep 17 00:00:00 2001
From: Dev By Ray <6241164+devbyray@users.noreply.github.com>
Date: Wed, 2 Apr 2025 08:01:02 +0200
Subject: [PATCH 06/13] feat(component): enhance ComponentExample with style
handling and unique ID generation
---
.../components/ComponentExample.vue | 139 ++++++++++++------
apps/documentation/docs/components/button.md | 5 -
packages/components/button/README.md | 2 +-
3 files changed, 92 insertions(+), 54 deletions(-)
diff --git a/apps/documentation/components/ComponentExample.vue b/apps/documentation/components/ComponentExample.vue
index c1f1a7b..dd443f7 100644
--- a/apps/documentation/components/ComponentExample.vue
+++ b/apps/documentation/components/ComponentExample.vue
@@ -1,5 +1,5 @@
diff --git a/apps/documentation/docs/components/button.md b/apps/documentation/docs/components/button.md
index d6b3037..d305d4c 100644
--- a/apps/documentation/docs/components/button.md
+++ b/apps/documentation/docs/components/button.md
@@ -1,11 +1,6 @@
Primary Button
diff --git a/packages/components/button/README.md b/packages/components/button/README.md
index 74a324e..48b5977 100644
--- a/packages/components/button/README.md
+++ b/packages/components/button/README.md
@@ -20,7 +20,7 @@ import '@devbyray/vue-wc-button';
-Click me
+ console.log('Click')">Click me
Primary Button
From edf8a7902a0d9b273aa330c06e4f6713d93d9023 Mon Sep 17 00:00:00 2001
From: Dev By Ray <6241164+devbyray@users.noreply.github.com>
Date: Wed, 2 Apr 2025 08:03:52 +0200
Subject: [PATCH 07/13] feat(package): add exports field for module resolution
---
packages/components/package.json | 7 +++++++
1 file changed, 7 insertions(+)
diff --git a/packages/components/package.json b/packages/components/package.json
index cb89d30..2d3fada 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -5,6 +5,13 @@
"main": "dist/index.js",
"module": "dist/index.mjs",
"types": "dist/index.d.ts",
+ "exports": {
+ ".": {
+ "types": "./dist/index.d.ts",
+ "import": "./dist/index.mjs",
+ "require": "./dist/index.js"
+ }
+ },
"files": [
"dist"
],
From d16d5d2f972914ce7e04ce71927a5dec765aa3d9 Mon Sep 17 00:00:00 2001
From: Dev By Ray <6241164+devbyray@users.noreply.github.com>
Date: Wed, 2 Apr 2025 10:16:06 +0200
Subject: [PATCH 08/13] fix(package): correct paths in package.json for
consistency
---
packages/components/package.json | 9 +++++----
1 file changed, 5 insertions(+), 4 deletions(-)
diff --git a/packages/components/package.json b/packages/components/package.json
index 2d3fada..3102395 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -2,14 +2,15 @@
"name": "@devbyray/vue-wc-components",
"version": "0.0.12",
"description": "All accessible Vue web components in one package",
- "main": "dist/index.js",
- "module": "dist/index.mjs",
- "types": "dist/index.d.ts",
+ "main": "./dist/index.js",
+ "module": "./dist/index.mjs",
+ "types": "./dist/index.d.ts",
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.mjs",
- "require": "./dist/index.js"
+ "require": "./dist/index.js",
+ "default": "./dist/index.js"
}
},
"files": [
From 3620ed608ff7fdee1db0d596d079b9f1bdbe9222 Mon Sep 17 00:00:00 2001
From: Dev By Ray <6241164+devbyray@users.noreply.github.com>
Date: Wed, 2 Apr 2025 21:21:23 +0200
Subject: [PATCH 09/13] feat(docs): add resolve alias for component path in
VitePress config
---
apps/documentation/.vitepress/config.mjs | 11 +++++++++++
1 file changed, 11 insertions(+)
diff --git a/apps/documentation/.vitepress/config.mjs b/apps/documentation/.vitepress/config.mjs
index c393ff8..6d11d97 100644
--- a/apps/documentation/.vitepress/config.mjs
+++ b/apps/documentation/.vitepress/config.mjs
@@ -1,4 +1,5 @@
import { defineConfig } from 'vitepress'
+import { resolve } from 'path'
// https://vitepress.dev/reference/site-config
export default defineConfig({
@@ -36,6 +37,16 @@ export default defineConfig({
vite: {
optimizeDeps: {
include: ['marked']
+ },
+ resolve: {
+ alias: {
+ '@devbyray/vue-wc-components': resolve(__dirname, '../../../packages/components')
+ }
+ },
+ build: {
+ commonjsOptions: {
+ strictRequires: true
+ }
}
}
})
From 18407d9898420c7bc4025846043bfeea5cfa8601 Mon Sep 17 00:00:00 2001
From: Dev By Ray <6241164+devbyray@users.noreply.github.com>
Date: Wed, 2 Apr 2025 21:26:42 +0200
Subject: [PATCH 10/13] fix(docs): update VitePress config to point to specific
dist file for component imports
---
apps/documentation/.vitepress/config.mjs | 4 +++-
apps/documentation/.vitepress/theme/index.js | 3 ++-
apps/documentation/package.json | 3 ++-
3 files changed, 7 insertions(+), 3 deletions(-)
diff --git a/apps/documentation/.vitepress/config.mjs b/apps/documentation/.vitepress/config.mjs
index 6d11d97..3e7f399 100644
--- a/apps/documentation/.vitepress/config.mjs
+++ b/apps/documentation/.vitepress/config.mjs
@@ -40,7 +40,9 @@ export default defineConfig({
},
resolve: {
alias: {
- '@devbyray/vue-wc-components': resolve(__dirname, '../../../packages/components')
+ // Point to the specific dist file rather than the directory
+ '@devbyray/vue-wc-components': resolve(__dirname, '../../../packages/components/dist/index.js'),
+ '@devbyray/vue-wc-components/dist/index.js': resolve(__dirname, '../../../packages/components/dist/index.js')
}
},
build: {
diff --git a/apps/documentation/.vitepress/theme/index.js b/apps/documentation/.vitepress/theme/index.js
index 91c52f8..15620b1 100644
--- a/apps/documentation/.vitepress/theme/index.js
+++ b/apps/documentation/.vitepress/theme/index.js
@@ -4,7 +4,8 @@ import DefaultTheme from 'vitepress/theme'
import MarkdownImporter from '../../components/MarkdownImporter.vue'
import ComponentExample from '../../components/ComponentExample.vue'
import './style.css'
-import '@devbyray/vue-wc-components'
+// Import the package via its entry point
+import '@devbyray/vue-wc-components/dist/index.js'
/** @type {import('vitepress').Theme} */
export default {
diff --git a/apps/documentation/package.json b/apps/documentation/package.json
index 7790d83..77cb8c6 100644
--- a/apps/documentation/package.json
+++ b/apps/documentation/package.json
@@ -4,8 +4,9 @@
"description": "A Vue-based accessible design system with headless web components",
"private": false,
"scripts": {
+ "build:deps": "pnpm --filter @devbyray/vue-wc-components run build",
"dev": "npm run copy-readme && vitepress dev",
- "build": "npm run copy-readme && vitepress build",
+ "build": "npm run build:deps && npm run copy-readme && vitepress build",
"preview": "vitepress preview",
"copy-readme": "node scripts/copy-readme.js"
},
From dcf58838ba08fb1f85dd4e5ee6b137c7e00f5e13 Mon Sep 17 00:00:00 2001
From: Dev By Ray <6241164+devbyray@users.noreply.github.com>
Date: Wed, 2 Apr 2025 21:31:45 +0200
Subject: [PATCH 11/13] fix(docs): update VitePress config to use specific
entry point for component imports
---
apps/documentation/.vitepress/config.mjs | 22 +++++++++-----------
apps/documentation/.vitepress/theme/index.js | 3 +--
2 files changed, 11 insertions(+), 14 deletions(-)
diff --git a/apps/documentation/.vitepress/config.mjs b/apps/documentation/.vitepress/config.mjs
index 3e7f399..47ce6bb 100644
--- a/apps/documentation/.vitepress/config.mjs
+++ b/apps/documentation/.vitepress/config.mjs
@@ -38,17 +38,15 @@ export default defineConfig({
optimizeDeps: {
include: ['marked']
},
- resolve: {
- alias: {
- // Point to the specific dist file rather than the directory
- '@devbyray/vue-wc-components': resolve(__dirname, '../../../packages/components/dist/index.js'),
- '@devbyray/vue-wc-components/dist/index.js': resolve(__dirname, '../../../packages/components/dist/index.js')
- }
- },
- build: {
- commonjsOptions: {
- strictRequires: true
- }
- }
+ // resolve: {
+ // alias: {
+ // '@devbyray/vue-wc-components': resolve(__dirname, '../../../packages/components')
+ // }
+ // },
+ // build: {
+ // commonjsOptions: {
+ // strictRequires: true
+ // }
+ // }
}
})
diff --git a/apps/documentation/.vitepress/theme/index.js b/apps/documentation/.vitepress/theme/index.js
index 15620b1..91c52f8 100644
--- a/apps/documentation/.vitepress/theme/index.js
+++ b/apps/documentation/.vitepress/theme/index.js
@@ -4,8 +4,7 @@ import DefaultTheme from 'vitepress/theme'
import MarkdownImporter from '../../components/MarkdownImporter.vue'
import ComponentExample from '../../components/ComponentExample.vue'
import './style.css'
-// Import the package via its entry point
-import '@devbyray/vue-wc-components/dist/index.js'
+import '@devbyray/vue-wc-components'
/** @type {import('vitepress').Theme} */
export default {
From d2782c87a50e34815e77f27efa8f0ed83ee0ec9f Mon Sep 17 00:00:00 2001
From: Dev By Ray <6241164+devbyray@users.noreply.github.com>
Date: Wed, 2 Apr 2025 21:36:12 +0200
Subject: [PATCH 12/13] feat(build): add Vercel configuration for deployment
---
package.json | 4 +++-
vercel.json | 13 +++++++++++++
2 files changed, 16 insertions(+), 1 deletion(-)
create mode 100644 vercel.json
diff --git a/package.json b/package.json
index a0f60b2..baf75f9 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,9 @@
"lint": "pnpm -r lint",
"test": "pnpm -r test",
"docs:dev": "pnpm --filter @devbyray/vue-wc-documentation dev",
- "docs:build": "pnpm --filter @devbyray/vue-wc-documentation build"
+ "docs:build": "pnpm --filter @devbyray/vue-wc-documentation build",
+ "vercel-build": "pnpm build:deps && pnpm docs:build",
+ "build:deps": "pnpm --filter @devbyray/vue-wc-core build && pnpm --filter ./packages/components/button build && pnpm --filter ./packages/components/input build && pnpm --filter ./packages/components/icon build && pnpm --filter @devbyray/vue-wc-components build"
},
"keywords": [
"vue",
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 0000000..aec5570
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,13 @@
+{
+ "version": 2,
+ "builds": [
+ {
+ "src": "package.json",
+ "use": "@vercel/node",
+ "config": {
+ "buildCommand": "pnpm vercel-build"
+ }
+ }
+ ],
+ "installCommand": "pnpm install"
+}
\ No newline at end of file
From 9070369b2e2c532315642a6b8955bb300f05c471 Mon Sep 17 00:00:00 2001
From: Dev By Ray <6241164+devbyray@users.noreply.github.com>
Date: Wed, 2 Apr 2025 21:48:27 +0200
Subject: [PATCH 13/13] fix(build): correct build command in Vercel
configuration
---
vercel.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/vercel.json b/vercel.json
index aec5570..b5d649f 100644
--- a/vercel.json
+++ b/vercel.json
@@ -5,7 +5,7 @@
"src": "package.json",
"use": "@vercel/node",
"config": {
- "buildCommand": "pnpm vercel-build"
+ "buildCommand": "pnpm run vercel-build"
}
}
],