Add vite

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@vue/cli-plugin-babel/preset"]
+}

.browserslistrc

@@ -0,0 +1,5 @@
+> 2%
+last 4 versions
+not dead
+not ie <= 11
+

.github/labeler.yml

@@ -4,7 +4,6 @@ build:
           - .eslintrc.js
           - .prettierrc
           - .stylelintrc
-          - bud.config.js
           - tsconfig.json
 dependencies:
   - changed-files:

.gitignore

@@ -1,7 +1,28 @@
-/node_modules
-/vendor
-/public
+node_modules
+vendor
+public
+dist
+dist-ssr
 .env
-.budfiles
-npm-debug.log
-yarn-error.log
+*.local
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+

.postcssrc

@@ -0,0 +1,13 @@
+{
+    "plugins": {
+        "autoprefixer": {},
+        "postcss-custom-media": {},
+        "postcss-inline-svg": {
+            "paths": [
+                "./resources/svg"
+            ],
+            "removeStroke": true,
+            "removeFill": true
+        }
+    }
+}

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "printWidth": 100,
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false
+}

README.md

@@ -1,54 +1,141 @@
-<p align="center">
-  <a href="https://roots.io/sage/">
-    <img alt="Sage" src="https://cdn.roots.io/app/uploads/logo-sage.svg" height="100">
-  </a>
-</p>
+# Wordpress Starter Theme with Sage and Vite
 
-<p align="center">
-  <a href="https://packagist.org/packages/roots/sage">
-    <img alt="Packagist Installs" src="https://img.shields.io/packagist/dt/roots/sage?label=projects%20created&colorB=2b3072&colorA=525ddc&style=flat-square">
-  </a>
+## Overview
 
-  <a href="https://github.com/roots/sage/actions/workflows/main.yml">
-    <img alt="Build Status" src="https://img.shields.io/github/actions/workflow/status/roots/sage/main.yml?branch=main&logo=github&label=CI&style=flat-square">
-  </a>
+WordPress starter theme with block editor support and Vite builder.
 
-  <a href="https://twitter.com/rootswp">
-    <img alt="Follow Roots" src="https://img.shields.io/badge/follow%20@rootswp-1da1f2?logo=twitter&logoColor=ffffff&message=&style=flat-square">
-  </a>
-</p>
+## Requirements
 
-<p align="center">Advanced WordPress starter theme with Tailwind CSS and Laravel Blade</p>
+- [Acorn](https://roots.io/acorn/docs/installation/) v3
+- [PHP](https://secure.php.net/manual/en/install.php) >= 8.0 (with [`php-mbstring`](https://secure.php.net/manual/en/book.mbstring.php) enabled)
+- [Composer](https://getcomposer.org/download/)
+- [Vite](https://vitejs.dev) >= 3.1.0
+- [Node.js](http://nodejs.org/) >= 18.0.0
+- [Yarn](https://yarnpkg.com/en/docs/install)
 
-<p align="center">
-  <a href="https://roots.io/sage/">Website</a> &nbsp;&nbsp; <a href="https://roots.io/sage/docs/installation/">Documentation</a> &nbsp;&nbsp; <a href="https://github.com/roots/sage/releases">Releases</a> &nbsp;&nbsp; <a href="https://discourse.roots.io/">Community</a>
-</p>
+## Theme installation
 
-## Sponsors
+Install Sage using Composer from your WordPress themes directory (replace `theme-name` below with the name of
+your theme):
 
-Sage is an open source project and completely free to use. If you've benefited from our projects and would like to support our future endeavors, please consider [sponsoring Roots](https://github.com/sponsors/roots).
+```shell
+# /wp-content/themes/
+$ composer create-project onepixnet/sage-vite theme-name
+```
 
-<div align="center">
-<a href="https://k-m.com/"><img src="https://cdn.roots.io/app/uploads/km-digital.svg" alt="KM Digital" width="120" height="90"></a> <a href="https://carrot.com/"><img src="https://cdn.roots.io/app/uploads/carrot.svg" alt="Carrot" width="120" height="90"></a> <a href="https://wordpress.com/"><img src="https://cdn.roots.io/app/uploads/wordpress.svg" alt="WordPress.com" width="120" height="90"></a> <a href="https://worksitesafety.ca/careers/"><img src="https://cdn.roots.io/app/uploads/worksite-safety.svg" alt="Worksite Safety" width="120" height="90"></a> <a href="https://www.copiadigital.com/"><img src="https://cdn.roots.io/app/uploads/copia-digital.svg" alt="Copia Digital" width="120" height="90"></a> <a href="https://www.freave.com/"><img src="https://cdn.roots.io/app/uploads/freave.svg" alt="Freave" width="120" height="90"></a> <a href="https://40q.agency/"><img src="https://cdn.roots.io/app/uploads/40q.svg" alt="40Q" width="120" height="90"></a>
-</div>
+To install the latest development version of Sage, add `dev-main` to the end of the command:
 
-## Overview
+```shell
+# /wp-content/themes/
+$ composer create-project onepixnet/sage-vite theme-name dev-main
+```
+
+Then jump to your `theme-name` and install [Acorn](https://roots.io/acorn/docs/installation/)
+
+```shell
+# /wp-content/themes/theme-name
+$ composer require roots/acorn
+```
+
+Then install dependencies and compile assets
+
+```shell
+$ yarn
+$ yarn build
+```
+
+You're ready to go!
+
+To start dev server and HMR just run
+
+```shell
+$ yarn dev
+```
+
+### Full list of commands
+
+```shell
+# /wp-content/themes/
+$ composer create-project onepixnet/sage-vite theme-name dev-main
+
+# /wp-content/themes/theme-name
+$ composer require roots/acorn
+$ yarn
+$ yarn build
+$ yarn dev
+```
+
+## Theme structure
+
+```sh
+themes/your-theme-name/   # → Root of your Sage based theme
+├── app/                  # → Theme PHP
+│   ├── Providers/        # → Service providers
+│   ├── View/             # → View models
+│   ├── filters.php       # → Theme filters
+│   ├── helpers.php       # → Global helpers
+│   ├── medias.php        # → Medias helper
+│   └── setup.php         # → Theme setup
+├── composer.json         # → Autoloading for `app/` files
+├── public/               # → Built theme assets (never edit)
+├── functions.php         # → Theme bootloader
+├── index.php             # → Theme template wrapper
+├── node_modules/         # → Node.js packages (never edit)
+├── package.json          # → Node.js dependencies and scripts
+├── resources/            # → Theme assets and templates
+│   ├── fonts/            # → Theme fonts
+│   ├── images/           # → Theme images
+│   ├── scripts/          # → Theme scripts
+│   ├── styles/           # → Theme styles
+│   ├── svg/              # → Theme svgs
+│   └── views/            # → Theme templates
+│       ├── components/   # → Component templates
+│       ├── forms/        # → Form templates
+│       ├── layouts/      # → Base templates
+│       ├── partials/     # → Partial templates
+        └── sections/     # → Section templates
+├── screenshot.png        # → Theme screenshot for WP admin
+├── style.css             # → Theme meta information
+├── vendor/               # → Composer packages (never edit)
+└── vite.config.ts        # → Vite configuration
+```
+
+## Theme development
+
+- Run `yarn` from the theme directory to install dependencies
+- Update `vite.config.ts` for bundler fine tuning
+
+### Build commands
+
+- `yarn dev` — Start dev server and hot module replacement
+- `yarn build` — Compile assets
+- `yarn lint` — Lint stylesheets & javascripts
+- `yarn lint:css` — Lint stylesheets
+- `yarn lint:js` — Lint javascripts
+
+### Hot Module Replacement
+
+#### Project Side
+
+Add the following variables in your project `.env`
+
+```sh
+# Endpoint where the bundler serve your assets
+HMR_ENTRYPOINT=http://localhost:3000
+```
 
-Sage is a WordPress starter theme with block editor support.
+#### Theme side
 
-- Harness the power of [Laravel](https://laravel.com) and its available packages thanks to [Acorn](https://github.com/roots/acorn)
-- Clean, efficient theme templating utilizing [Laravel Blade](https://laravel.com/docs/master/blade)
-- Modern frontend development workflow powered by [Bud](https://bud.js.org/)
-- Out of the box support for [Tailwind CSS](https://tailwindcss.com/)
+For advanced dev server configuration, copy `.env.example` according
+to [Vite naming convention and loading order](https://vitejs.dev/guide/env-and-mode.html#env-files) and update variables
 
-## Getting Started
+#### FYI
 
-See the [Sage installation documentation](https://roots.io/sage/docs/installation/).
+Running HMR Mode remove the `public/manifest.json` file, so do not forget to re-run the assets compilation
+with `yarn build` if needed.
 
-## Stay Connected
+## Documentation
 
-- Join us on Discord by [sponsoring us on GitHub](https://github.com/sponsors/roots)
-- Participate on [Roots Discourse](https://discourse.roots.io/)
-- Follow [@rootswp on Twitter](https://twitter.com/rootswp)
-- Read the [Roots Blog](https://roots.io/blog/)
-- Subscribe to the [Roots Newsletter](https://roots.io/newsletter/)
+- [Sage documentation](https://roots.io/sage/docs/)
+- [Controller documentation](https://github.com/soberwp/controller#usage)
+- [Vite](https://vitejs.dev/guide/)

app/filters.php

@@ -14,3 +14,20 @@
 add_filter('excerpt_more', function () {
     return sprintf(' &hellip; <a href="%s">%s</a>', get_permalink(), __('Continued', 'sage'));
 });
+
+/**
+ * Load scripts asset as module
+ *
+ * @return string
+ */
+add_filter('script_loader_tag', function ($tag, $handle, $src): string {
+    $namespace = strtolower(wp_get_theme()->get('Name'));
+
+    if ($namespace !== $handle) {
+        return $tag;
+    }
+
+    $tag = '<script type="module" src="' . esc_url($src) . '"></script>';
+
+    return $tag;
+}, 10, 3);

app/helpers.php

@@ -0,0 +1,26 @@
+<?php
+namespace App;
+
+/**
+ * Check hot reload status
+ *
+ * @return boolean
+ */
+function hmr_enabled(): bool
+{
+    return env('HMR_ENABLED') ?: !file_exists(get_theme_file_path('/public/manifest.json'));
+}
+
+/**
+ * Build assets hmr uri
+ *
+ * @param string $asset
+ *
+ * @return string
+ */
+function hmr_assets(string $asset): string
+{
+    $entrypoint = env('HMR_ENTRYPOINT') ?: 'http://localhost:3000';
+
+    return $entrypoint ? "{$entrypoint}/{$asset}" : asset($asset);
+}