Merge pull request #197 from PrestaShopCorp/feature/test-conversion-f…

…rom-vue-js-to-web-components

Feature/test conversion from vue js to web components

.gitignore

@@ -17,4 +17,4 @@ packages/puik/version.ts
 *.local
 
 # playground test file
-playground/src/App.vue
+playground/src/App.vue

.vscode/settings.json

@@ -2,7 +2,8 @@
   "cSpell.words": ["Puik", "puik"],
   "typescript.tsdk": "node_modules/typescript/lib",
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll": false,
+    "source.fixAll.eslint": false
   },
   "npm.packageManager": "pnpm",
   "eslint.probe": [
@@ -23,6 +24,7 @@
     "vue",
     "markdown"
   ],
+  "css.customData": [".vscode/tailwind.json"],
   "vite.devCommand": "pnpm run dev -- --",
   "i18n-ally.localesPaths": "packages/locale/lang",
   "i18n-ally.enabledParsers": ["ts"],

.vscode/tailwind.json

@@ -0,0 +1,55 @@
+{
+  "version": 1.1,
+  "atDirectives": [
+    {
+      "name": "@tailwind",
+      "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind"
+        }
+      ]
+    },
+    {
+      "name": "@apply",
+      "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#apply"
+        }
+      ]
+    },
+    {
+      "name": "@responsive",
+      "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n  .alert {\n    background-color: #E53E3E;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#responsive"
+        }
+      ]
+    },
+    {
+      "name": "@screen",
+      "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n  /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n  /* ... */\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#screen"
+        }
+      ]
+    },
+    {
+      "name": "@variants",
+      "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n   .btn-brand {\n    background-color: #3182CE;\n  }\n}\n```\n",
+      "references": [
+        {
+          "name": "Tailwind Documentation",
+          "url": "https://tailwindcss.com/docs/functions-and-directives#variants"
+        }
+      ]
+    }
+  ]
+}

build/package.json

@@ -37,6 +37,8 @@
     "@esbuild-kit/cjs-loader": "^2.4.2",
     "@pnpm/types": "^9.0.0",
     "@types/rollup-plugin-css-only": "^3.1.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "sass": "^1.67.0",
     "unbuild": "^1.2.0",
     "vue": "^3.2.47"
   }

build/src/tasks/full-bundle.ts

@@ -1,16 +1,16 @@
 import path from 'path'
-import { nodeResolve } from '@rollup/plugin-node-resolve'
 import { rollup } from 'rollup'
+import { nodeResolve } from '@rollup/plugin-node-resolve'
 import commonjs from '@rollup/plugin-commonjs'
+import esbuild from 'rollup-plugin-esbuild'
 import vue from '@vitejs/plugin-vue'
 import DefineOptions from 'unplugin-vue-define-options/rollup'
-import esbuild from 'rollup-plugin-esbuild'
 import { parallel } from 'gulp'
 import glob from 'fast-glob'
+import postcss from 'rollup-plugin-postcss'
 import { camelCase, upperFirst } from 'lodash-unified'
-import { version } from '../../../packages/puik/version'
-import { PuikAlias } from '../plugins/puik-alias'
 import {
+  themeRoot,
   puikRoot,
   puikOutput,
   localeRoot,
@@ -19,6 +19,8 @@ import {
   writeBundles,
   withTaskName,
 } from '../utils'
+import { version } from '../../../packages/puik/version'
+import { PuikAlias } from '../plugins/puik-alias'
 import { target } from '../build-info'
 
 const banner = `/*! Puik v${version} */\n`
@@ -27,15 +29,22 @@ async function buildFullEntry(minify: boolean) {
   const bundle = await rollup({
     input: path.resolve(puikRoot, 'index.ts'),
     plugins: [
+      nodeResolve({
+        extensions: ['.mjs', '.js', '.json', '.ts', '.scss'],
+      }),
+      commonjs(),
       PuikAlias(),
       vue({
         isProduction: true,
+        customElement: true,
       }),
-      DefineOptions(),
-      nodeResolve({
-        extensions: ['.mjs', '.js', '.json', '.ts'],
+      postcss({
+        config: {
+          path: `${themeRoot}/postcss.config.js`,
+          ctx: {},
+        },
       }),
-      commonjs(),
+      DefineOptions(),
       esbuild({
         exclude: [],
         minify,

build/src/tasks/modules.ts

@@ -1,16 +1,18 @@
 import { rollup } from 'rollup'
-import vue from '@vitejs/plugin-vue'
-import DefineOptions from 'unplugin-vue-define-options/rollup'
 import { nodeResolve } from '@rollup/plugin-node-resolve'
 import commonjs from '@rollup/plugin-commonjs'
 import esbuild from 'rollup-plugin-esbuild'
+import vue from '@vitejs/plugin-vue'
+import DefineOptions from 'unplugin-vue-define-options/rollup'
+import postcss from 'rollup-plugin-postcss'
 import glob from 'fast-glob'
 import {
   puikRoot,
   pkgRoot,
   generateExternal,
   writeBundles,
   excludeFiles,
+  themeRoot,
 } from '../utils'
 import { PuikAlias } from '../plugins/puik-alias'
 import { buildConfigEntries, target } from '../build-info'
@@ -28,15 +30,22 @@ export const buildModules = async () => {
   const bundle = await rollup({
     input,
     plugins: [
+      commonjs(),
+      nodeResolve({
+        extensions: ['.mjs', '.js', '.json', '.ts', '.scss'],
+      }),
       PuikAlias(),
       DefineOptions(),
       vue({
         isProduction: false,
+        customElement: true,
       }),
-      nodeResolve({
-        extensions: ['.mjs', '.js', '.json', '.ts'],
+      postcss({
+        config: {
+          path: `${themeRoot}/postcss.config.js`,
+          ctx: {},
+        },
       }),
-      commonjs(),
       esbuild({
         sourceMap: true,
         target,

packages/components/icon/index.ts

@@ -1,8 +1,15 @@
+import { defineCustomElement } from 'vue'
 import { withInstall } from '@puik/utils'
 
 import Icon from './src/icon.vue'
 
 export const PuikIcon = withInstall(Icon)
-export default PuikIcon
+export const PuikIconCe = defineCustomElement(PuikIcon)
+
+if (!customElements.get('puik-icon-ce')) {
+  customElements.define('puik-icon-ce', PuikIconCe)
+}
 
 export * from './src/icon'
+
+export default PuikIcon

packages/components/icon/src/icon.vue

@@ -31,3 +31,8 @@ const style = {
   color: props.color,
 }
 </script>
+
+<style lang="scss">
+@import '../../../theme/src/base';
+@import '../../../theme/src/icon';
+</style>

packages/components/tooltip/index.ts

@@ -1,8 +1,15 @@
+import { defineCustomElement } from 'vue'
 import { withInstall } from '@puik/utils'
 
 import Tooltip from './src/tooltip.vue'
 
 export const PuikTooltip = withInstall(Tooltip)
-export default PuikTooltip
+export const PuikTooltipCe = defineCustomElement(PuikTooltip)
+
+if (!customElements.get('puik-tooltip-ce')) {
+  customElements.define('puik-tooltip-ce', PuikTooltipCe)
+}
 
 export * from './src/tooltip'
+
+export default PuikTooltip

packages/components/tooltip/src/tooltip.vue

@@ -87,3 +87,8 @@ onMounted(() => {
   }
 })
 </script>
+
+<style lang="scss">
+@use '../../../theme/src/base';
+@use '../../../theme/src/tooltip.scss';
+</style>

packages/puik/component.ts

@@ -30,7 +30,7 @@ import {
   PuikMenuItemTitle,
 } from '@puik/components/menu'
 import { PuikProgressBar } from '@puik/components/progress-bar'
-import { PuikIcon } from '@puik/components/icon'
+import { PuikIcon, PuikIconCe } from '@puik/components/icon'
 import { PuikLink } from '@puik/components/link'
 import { PuikCard } from '@puik/components/card'
 import { PuikSnackbar } from '@puik/components/snackbar'
@@ -39,7 +39,7 @@ import { PuikCheckbox } from '@puik/components/checkbox'
 import { PuikRadio } from '@puik/components/radio'
 import { PuikSelect, PuikOption } from '@puik/components/select'
 import { PuikAlert } from '@puik/components/alert'
-import { PuikTooltip } from '@puik/components/tooltip'
+import { PuikTooltip, PuikTooltipCe } from '@puik/components/tooltip'
 import { PuikSwitch } from '@puik/components/switch'
 import { PuikButton } from '@puik/components/button'
 import { PuikInput } from '@puik/components/input'
@@ -74,6 +74,7 @@ export default [
   PuikMenuItemTitle,
   PuikProgressBar,
   PuikIcon,
+  PuikIconCe,
   PuikLink,
   PuikCard,
   PuikSnackbar,
@@ -85,6 +86,7 @@ export default [
   PuikSelect,
   PuikAlert,
   PuikTooltip,
+  PuikTooltipCe,
   PuikSwitch,
   PuikButton,
   PuikConfigProvider,

packages/theme/postcss.config.js

@@ -1,6 +1,10 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const path = require('path')
 module.exports = {
   plugins: {
-    tailwindcss: {},
+    tailwindcss: {
+      config: path.join(__dirname, 'tailwind.config.js'),
+    },
     autoprefixer: {},
   },
 }

playground/package.json

@@ -12,6 +12,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.1.0",
+    "sass": "^1.67.0",
     "typescript": "^5.0.4",
     "vite": "^4.2.1",
     "vue-tsc": "^1.2.0"

playground/vite.config.ts

@@ -6,7 +6,17 @@ import DefineOptions from 'unplugin-vue-define-options/vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), DefineOptions()],
+  plugins: [
+    vue({
+      template: {
+        compilerOptions: {
+          isCustomElement: (tag) => tag.includes('-ce'),
+        },
+      },
+      customElement: true,
+    }),
+    DefineOptions(),
+  ],
   css: {
     postcss: {
       plugins: [tailwindcss()],
@@ -19,6 +29,10 @@ export default defineConfig({
         find: /^@puik\/(.*)$/,
         replacement: `${path.resolve('../packages')}/$1`,
       },
+      {
+        find: /^~(.*)$/,
+        replacement: '$1',
+      },
     ],
   },
 })