vite-modification-sass-ts

.gitignore

@@ -18,3 +18,4 @@ yarn.lock
 cypress/videos/
 cypress/screenshots/
 lighthouse-report.html
+assets/ysw-*.min.*

package.json

@@ -4,7 +4,11 @@
   "description": "Shopify Boilerplate Template based on Dawn",
   "scripts": {
     "test": "shopify ",
-    "cy:open": "cypress open"
+    "cy:open": "cypress open",
+    "dev:vite": "nodemon --watch 'src/**/*' -e ts,scss --exec \"npm run build:vite\"",
+    "dev": "npm-run-all --parallel dev:*",
+    "build:vite": "vite build",
+    "build": "npm-run-all --parallel build:*"
   },
   "keywords": [
     "shopify"
@@ -14,6 +18,7 @@
   "devDependencies": {
     "@commitlint/cli": "^17.2.0",
     "@commitlint/config-conventional": "^17.2.0",
+    "@shopify/themekit": "^1.1.9",
     "cypress": "^10.11.0",
     "eslint": "^8.26.0",
     "eslint-config-airbnb-base": "^15.0.0",
@@ -22,14 +27,17 @@
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^4.2.1",
     "husky": "^8.0.1",
+    "nodemon": "^3.0.1",
+    "npm-run-all": "^4.1.5",
     "prettier": "^2.7.1",
     "sass": "^1.55.0",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-prettier-scss": "^0.0.1",
     "stylelint-config-standard": "^29.0.0",
     "stylelint-config-standard-scss": "^6.0.0",
     "stylelint-scss": "^4.3.0",
-    "vite": "^3.2.2",
-    "vite-plugin-singlefile": "^0.12.3"
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9",
+    "vite-plugin-sass-dts": "^1.3.9"
   }
 }

src/js/README.md

@@ -0,0 +1,27 @@
+# Javascript Guidelines
+
+Let's keep all the JS assets to this path.
+
+## Naming classes
+
+Use `PascalCase` for classes.
+
+```js
+class YswProduct {
+    constructor() {}
+}
+
+class YswGlobal {
+    constructor() {}
+}
+```
+
+## Naming functions, variables, methods, etc
+
+Use `camelCase` for functions, variables methods and others.
+
+```js
+function getProduct() {}
+
+const productPrice = () => {}
+```

src/sass/README.md

@@ -0,0 +1,34 @@
+# CSS Architecture
+
+Let's keep all the CSS assets to this path.
+
+If you want to add new CSS section, create the new file and be sure to add it to the list of folders in this path.
+
+- `sections` larger modules that can be used in multiple places.
+- `snippets` small pieces of reusable code that can be used in multiple places.
+- `utilities` helper utility classes.
+- `global` global functionalities, variables and colors.
+
+Follow the guide created by Brad Frost: https://bradfrost.com/blog/post/css-architecture-for-design-systems/.
+
+## Global namespace
+
+All classes associated with the design system are prefixed with a global namespace, which is the Company Name followed by a hyphen:
+
+```
+.ysw-
+```
+
+## Class prefixes
+
+`c-` for UI components, such as `.ysw-c-card` or `.ysw-c-header`.
+`l-` for layout-related styles, such as `.ysw-l-grid__item` or `.ysw-l--two-column`.
+`u-` for utilities, such as `.ysw-u-margin-bottom-double` or `.ysw-u-margin-bottom-double`.
+`is-` and `has-` for specific states, such as `.ysw-is-active` or `.ysw-is-disabled`. These state-based classes would apply to.
+`js-` for targeting JavaScript-specific functionality, such as `.js-modal-trigger`. No styles are bound to these classes; they’re reserved for behavior only. For most cases, these `js-` classes would toggle state-based classes to an element.
+
+## BEM syntax
+
+`Block` is the primary component block, such as `.ysw-c-card` or `.ysw-c-btn`.
+`Element` is a child of the primary block, such as `.ysw-c-card__title`.
+`Modifier` is a variation of a component style, such as `.ysw-c-alert--error`.

src/sass/global/_remCalc.scss

@@ -0,0 +1,5 @@
+$base-font-size: 14px;
+
+@function remCalc($value) {
+    @return calc($value / $base-font-size * 1rem);
+}

src/sass/global/_variables.scss

@@ -0,0 +1,2 @@
+$ysw-color-black: #000000;
+$ysw-color-white: #ffffff;

src/sass/global/global.scss

@@ -0,0 +1,2 @@
+@import 'remCalc';
+@import "variables";

tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

vite.config.js

@@ -1,18 +1,43 @@
 import { defineConfig } from 'vite';
+import path from 'path';
+import fs from 'fs';
+
+function generateEntryPoints() {
+  const entryPoints = {};
+  const srcDir = './src';
+  const modulesDir = './src/modules';
+
+  const files = fs.readdirSync(srcDir);
+  const tsFiles = files.filter((file) => file.endsWith('.ts'));
+
+  if (fs.existsSync(modulesDir)) {
+    const moduleFiles = fs.readdirSync(modulesDir).filter((file) => file.endsWith('.ts'));
+
+    moduleFiles.forEach((file) => {
+      const fileName = path.basename(file, '.ts');
+      entryPoints[fileName] = path.resolve(modulesDir, file);
+    });
+  }
+
+  tsFiles.forEach((file) => {
+    const fileName = path.basename(file, '.ts');
+    entryPoints[fileName] = path.resolve(srcDir, file);
+  });
+
+  return entryPoints;
+}
 
 export default defineConfig({
-    build: {
-        outDir: './assets',
-        assetsDir: '',
-        rollupOptions: {
-            input: {
-                'main': './assets/ysw-main.js',
-            },
-            output: {
-                entryFileNames: '[name].min.js',
-                assetFileNames: '[name].min.[ext]',
-            },
-        },
-        emptyOutDir: false,
+  build: {
+    outDir: './assets',
+    assetsDir: '',
+    rollupOptions: {
+      input: generateEntryPoints(),
+      output: {
+        entryFileNames: 'ysw-[name].min.js',
+        assetFileNames: 'ysw-[name].min.[ext]',
+      },
     },
+    emptyOutDir: false,
+  },
 });