Skip to content

Feat/compiler components #4525

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 24 commits into
base: develop
Choose a base branch
from
Open

Feat/compiler components #4525

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
096c3ca
raw
m0ksem Feb 22, 2025
df0db53
raw
m0ksem Feb 25, 2025
73f8718
feat(virtual-components): add docs, tests and separate to lib
m0ksem Mar 20, 2025
6e9c4ac
feat(virtual-components): add methods
m0ksem Mar 20, 2025
1c23f59
fix(virtual-components): fix tests
m0ksem Mar 20, 2025
ffe45f5
demo
m0ksem Mar 21, 2025
5faef5c
feat(virtual-components): execute script setup
m0ksem Mar 21, 2025
a2d03f7
chore(virtual-components): improve errors
m0ksem Mar 21, 2025
f3dc5bf
fix(virtual-components): correct simplification algorithm
m0ksem Mar 21, 2025
c80fde4
chore(virtual-components): remove junk
m0ksem Mar 21, 2025
3f62c92
feat(virtual-components): add support for variable in script setup
m0ksem Mar 22, 2025
64f20b6
feat(virtual-components): prefix imports
m0ksem Mar 22, 2025
e3cd86c
feat(virtual-components): optimize v-for
m0ksem Mar 22, 2025
4efa2b7
feat(virtual-components): improve performance and fix nested compiling
m0ksem Mar 23, 2025
fdb3796
chore(virtual-components): tailwind demo
m0ksem Mar 24, 2025
ba34ebf
fix(virtual-components): improve demos
m0ksem Mar 25, 2025
8e2d362
fix(virtual-components): tests
m0ksem Mar 25, 2025
ae562e9
feat(virtual-components): raw
m0ksem Apr 10, 2025
186fa05
Merge branch 'develop' into feat/compiler-components
m0ksem May 12, 2025
dcfa247
Merge branch 'develop' into feat/compiler-components
m0ksem Jun 3, 2025
8a1198d
fix: tests
m0ksem Jun 3, 2025
d971cac
fix(compiler): playground
m0ksem Jun 4, 2025
3af8108
Merge branch 'develop' into feat/compiler-components
m0ksem Jul 7, 2025
c17d0fc
chore: remove old code
m0ksem Jul 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@
"workspaces": {
"packages": [
"packages/*",
"packages/extensions/*"
"packages/extensions/*",
"packages/compiler/playground"
]
},
"gitHooks": {
Expand Down
6 changes: 4 additions & 2 deletions packages/compiler/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@
"build:vite": "tsup-node vite-plugin/index.ts --dts --format esm,cjs --target node16 --shims --out-dir ./dist/vite",
"build:devtools:client": "vite build --config devtools/client/vite.config.ts --outDir ./dist/devtools/client",
"dev": "cd ./playground && yarn dev",
"prepublishOnly": "npm run build"
"prepublishOnly": "npm run build",
"test": "vitest run"
},
"peerDependencies": {
"@vue/compiler-core": "^3.4.21",
Expand Down Expand Up @@ -48,6 +49,7 @@
"devDependencies": {
"@vitejs/plugin-vue": "^6.0.0",
"tsup": "^8.5.0",
"vite": "5.3.3"
"vite": "5.3.3",
"vitest": "^3.0.8"
}
}
3 changes: 2 additions & 1 deletion packages/compiler/playground/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ coverage
*.sw?

*.tsbuildinfo

.yarn

.components.d.ts
.components.d.ts
3 changes: 3 additions & 0 deletions packages/compiler/playground/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vuestic Devtools Playground</title>
<!-- Link to tailwind -->
<!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"> -->
Comment on lines +8 to +9
Copy link

Copilot AI Jun 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Material Icons stylesheet is commented out, which will prevent icons from displaying correctly. Uncomment or include the proper link.

Suggested change
<!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"> -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">

Copilot uses AI. Check for mistakes.
</head>
<body>
<div id="app"></div>
Expand Down
5 changes: 4 additions & 1 deletion packages/compiler/playground/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,16 @@
"type-check": "vue-tsc --build --force"
},
"dependencies": {
"vue": "^3.5.17"
"@vuestic/compiler": "../",
"vue": "^3.5.0"
},
"devDependencies": {
"@tailwindcss/vite": "^4.0.15",
"@tsconfig/node20": "^20.1.4",
"@types/node": "^20.14.5",
"@vitejs/plugin-vue": "^5.0.5",
"@vue/tsconfig": "^0.5.1",
"tailwindcss": "^4.0.15",
"typescript": "~5.4.0",
"vite": "^5.3.6",
"vue-tsc": "^2.0.21"
Expand Down
57 changes: 32 additions & 25 deletions packages/compiler/playground/src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,38 @@
<script setup lang="ts">
import TestPage from './pages/TestPage.vue';
<script setup>
import Test from './Test.vue'
import { ref } from 'vue'

const ordersCount = 1000;
Copy link

Copilot AI Jun 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ordersCount and the subsequent orders array are declared but not used in the template. Remove them or wire them up to avoid dead code.

Copilot uses AI. Check for mistakes.
const orders = Array.from({ length: ordersCount }, (_, i) => ({
id: i,
customer: `Customer ${i + 1}`,
amount: (Math.random() * 1000).toFixed(2),
status: ['Pending', 'Shipped', 'Delivered'][i % 3]
}));

const icon = ref('refresh');
const color = ref('primary');
</script>

<template>
<VaNavbar color="myCustomColor">
<template #left>
Vuestic UI Devtools demo
</template>
<template #right>
<VaNavbarItem>
<router-link to="/about">
Test
</router-link>
<div class="app">
<h1>Order Management</h1>
<div class="orders-grid" v-once>
<VcButton icon="person">New Order</VcButton>
<VcButton :icon="icon">Refresh</VcButton>
</div>

</VaNavbarItem>
<VaNavbarItem>
<router-link to="/contact">Contact</router-link>
</VaNavbarItem>
</template>
</VaNavbar>

<div style="padding: 16px">
<TestPage>
Default slot
<template #footer>
Footer slot
</template>
</TestPage>
<Test />
</div>
</template>

<style>
.app {
text-align: center;
}
.orders-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
}
</style>
9 changes: 9 additions & 0 deletions packages/compiler/playground/src/Test.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<script setup lang="ts">
import { ref } from 'vue';
const color = ref('primary');
Copy link

Copilot AI Jun 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The color ref is defined but never used in this template—consider removing it.

Suggested change
const color = ref('primary');

Copilot uses AI. Check for mistakes.
</script>

<template>
<VcButton>Refresh</VcButton>
</template>
1 change: 1 addition & 0 deletions packages/compiler/playground/src/assets/tailwind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@import "tailwindcss";
61 changes: 61 additions & 0 deletions packages/compiler/playground/src/components/VcButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
<script setup lang="ts">
import VcIcon from './VcIcon.vue';
import VcProgress from './VcProgress.vue';
// import { useColor } from '../composables/useColor'
Comment on lines +4 to +5
Copy link

Copilot AI Jun 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove the commented import for useColor if it's not intended to be used, avoiding dead code.

Suggested change
// import { useColor } from '../composables/useColor'

Copilot uses AI. Check for mistakes.
const { color = 'primary', icon, loading } = defineProps({
icon: String,
color: String,
iconRight: String,
loading: Boolean
})
const getTextColor = (color: string) => {
switch (color) {
case 'primary':
return 'text-white'
case 'secondary':
return 'text-white'
default:
return 'text-gray-500'
}
}
const getColor = (color: string) => {
switch (color) {
case 'primary':
return 'bg-[#154EC1]'
case 'secondary':
return 'bg-[#767C88]'
default:
return 'gray'
Copy link

Copilot AI Jun 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The default background class 'gray' is not a valid Tailwind background utility. Consider returning a valid class like 'bg-gray-200'.

Suggested change
return 'gray'
return 'bg-gray-500'

Copilot uses AI. Check for mistakes.
}
}
const getStyle = (color: string) => {
const colorHex = getColor(color)
const colorTextHex = getTextColor(color)
return `${colorHex} ${colorTextHex}`
}
if (loading) {
console.log('icon', icon)
Copy link

Copilot AI Jun 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove this debug console.log statement to avoid unnecessary logging in production code.

Suggested change
console.log('icon', icon)
// No-op: Removed unnecessary console.log statement

Copilot uses AI. Check for mistakes.
}
defineSlots<{
dropdown: true,
default: true
}>()
// const colorC = useColor({})
</script>

<template>
<button :class="[getStyle(color)]" class="px-3 py-1 flex items-center justify-center space-x-2 rounded-sm">
<VcIcon v-if="icon" :icon="icon" class="mr-2"></VcIcon>
<slot />
<VcIcon v-if="iconRight" :icon="iconRight" class="ml-2"></VcIcon>
<VcProgress v-if="loading" fillColor="blue-500" unfillColor="gray-200"></VcProgress>
</button>
</template>
5 changes: 5 additions & 0 deletions packages/compiler/playground/src/components/VcCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<template>
<div class="p-4 bg-white rounded-lg shadow-md">
<slot />
</div>
</template>
6 changes: 6 additions & 0 deletions packages/compiler/playground/src/components/VcCardContent.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<template>
<div class="p-4">
<slot />
</div>
</template>

6 changes: 6 additions & 0 deletions packages/compiler/playground/src/components/VcCardTitle.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<template>
<div class="p-4 text-gray-700 text-sm font-medium">
<slot />
</div>
</template>

9 changes: 9 additions & 0 deletions packages/compiler/playground/src/components/VcIcon.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<script setup lang="ts">
defineProps({
icon: String
})
</script>

<template>
<i class="material-icons">{{ icon }}</i>
</template>
16 changes: 16 additions & 0 deletions packages/compiler/playground/src/components/VcInput.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<script setup lang="ts">
defineProps({
placeholder: String,
label: String
})
</script>

<template>
<div class="flex flex-col gap-1">
<label v-if="$props.label" class="text-gray-700 text-xs font-medium uppercase">{{ $props.label }}</label>
<input
:placeholder="placeholder"
class="px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-primary-500 focus:outline-none transition-all"
/>
</div>
</template>
11 changes: 11 additions & 0 deletions packages/compiler/playground/src/components/VcList.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<script setup>
const props = defineProps({
items: Array
})
</script>

<template>
<ul>
<li v-for="item in items" :key="item">{{ item }}</li>
</ul>
</template>
36 changes: 36 additions & 0 deletions packages/compiler/playground/src/components/VcOrderCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<script setup lang="ts">
import VcButton from './VcButton.vue';

const props = defineProps({
order: { type: Object, required: true }
});

const statusClass = (status: 'pending' | 'shipped' | 'delivered') => {
switch (status) {
case 'pending':
return 'text-yellow-500';
case 'shipped':
return 'text-blue-500';
case 'delivered':
return 'text-green-500';
default:
return 'text-gray-500';
}
};
</script>

<template>
<div class="p-4 rounded-lg shadow bg-white">
<h3>Order #{{ order.id }}</h3>
<p><strong>Customer:</strong> {{ order.customer }}</p>
<p><strong>Amount:</strong> ${{ order.amount }}</p>
<p><strong>Status:</strong> <span :class="statusClass(order.status.toLowerCase())">{{ order.status }}</span></p>

<div class="flex flex-col items-center gap-2 mt-2">
<VcButton color="primary" type="solid">
View Customer
</VcButton>
<VcButton color="secondary" type="outlined">Track Order</VcButton>
</div>
</div>
</template>
14 changes: 14 additions & 0 deletions packages/compiler/playground/src/components/VcProgress.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
<script setup lang="ts">
const { fillColor = 'blue-600', unfillColor = 'gray-200' } = defineProps({
fillColor: String,
unfillColor: String
})
</script>

<template>
<div role="status">
<svg aria-hidden="true" :class="`w-8 h-8 animate-spin text-${fillColor} fill-${unfillColor}`" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/>
<path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/></svg>
</div>
</template>
5 changes: 5 additions & 0 deletions packages/compiler/playground/src/composables/useColor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { ref } from "vue"

export const useColor = (props: Record<string, any>) => {
Copy link

Copilot AI Jun 20, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The props parameter is declared but never used in useColor. Consider removing it or implementing logic that uses these props.

Suggested change
export const useColor = (props: Record<string, any>) => {
export const useColor = () => {

Copilot uses AI. Check for mistakes.
return ref('red')
}
2 changes: 2 additions & 0 deletions packages/compiler/playground/src/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { createApp } from 'vue'
import App from './App.vue'

import './assets/tailwind.css'

createApp(App)
.mount('#app')
11 changes: 0 additions & 11 deletions packages/compiler/playground/src/pages/TestButton.vue
View file
Open in desktop

This file was deleted.

15 changes: 0 additions & 15 deletions packages/compiler/playground/src/pages/TestButtonBase.vue
View file
Open in desktop

This file was deleted.

Loading
Loading