Vite release

apos.vite.config.js

@@ -0,0 +1,15 @@
+import { defineConfig } from '@apostrophecms/vite/vite';
+
+export default defineConfig({
+  server: {
+    watch: {
+      // So that Tailwind CSS changes in the nunjucks templates do not trigger Vite
+      // page reloads. This is done by `nodemon` and apos "refresh on restart"
+      // because we need a process restart.
+      ignored: [
+        '**/modules/views/**/*.html',
+        '**/views/**/*.html'
+      ]
+    }
+  }
+});

app.js

@@ -1,5 +1,8 @@
-require('apostrophe')({
-  shortName: 'a3-ecommerce-starter',
+import apostrophe from 'apostrophe';
+
+apostrophe({
+  root: import.meta,
+  shortName: 'a4-ecommerce-starter',
   modules: {
     // Design system: register only when not in production.
     // Install via `npm install @corllete/apos-ds` first.
@@ -28,6 +31,7 @@ require('apostrophe')({
     // ),
     // END Design system
 
+    '@apostrophecms/vite': {},
     '@apostrophecms/open-graph': {},
     '@apostrophecms/seo': {},
     i18n: {},

design-system-setup/@corllete/apos-ds/index.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   init(self) {
     // Custom filters, used in the design system only
     self.apos.template.addFilter({

docs/developer/branding-and-ui.md

@@ -147,18 +147,18 @@ A common mistake when working with Tailwind CSS is concatenating classes. The Nu
 
 ### Bootstrapping
 
-The Tailwind bootstrap file `modules/theme/ui/src/tailwind.scss` contains 
+The Tailwind bootstrap file `modules/theme/ui/src/tailwind.css` contains 
 - The Tailwind recommended setup (core components and utilities)
 - `base` layer, taking care of the global typography and adding some Apostrophe specific global styling (like `pager`).
 - `components` layer with some additional useful typography classes (`t-display`, `t-subtitle`, `t-caption`, `t-link`, `t-richtext`)
 
 ::: info
-The theme is using the core Tailwind `@tailwindcss/typography` plugin (`prose` class) to handle dynamic markup, provided by Apostrophe core `@apostrophecms/rich-text-widget`. This is done via the `className` option per instance of the widget. You can control the custom pages rich text behavior with just modifying the `.t-richtext` component in `modules/theme/ui/src/tailwind.scss`. Some widgets are using rich text in a specific context and are providing specific `className` instructions to their owned rich text instances.
+The theme is using the core Tailwind `@tailwindcss/typography` plugin (`prose` class) to handle dynamic markup, provided by Apostrophe core `@apostrophecms/rich-text-widget`. This is done via the `className` option per instance of the widget. You can control the custom pages rich text behavior with just modifying the `.t-richtext` component in `modules/theme/ui/src/tailwind.css`. Some widgets are using rich text in a specific context and are providing specific `className` instructions to their owned rich text instances.
 :::
 
 ### Font
 
-The configured in `tailwind.config.js` font `Inter var` is loaded in `modules/theme/ui/src/fonts.css`. The font itself can be found in `modules/theme/public/fonts`.
+The configured in `tailwind.config.js` font `Inter var` is loaded with inline style in `views/layout.html` to prevent the Flash of Unstyled Text (FOUT). You can replace it with your own font. The font itself can be found in `modules/theme/public/fonts`.
 
 ### Brand Color Scheme
 

docs/developer/getting-started.md

@@ -5,15 +5,15 @@ titleTemplate: Developer
 
 # {{ $frontmatter.title }}
 
-The e-commerce starter application aims to deliver a good starting point of Apostrophe CSM based e-commerce solutions, using the wide variety of features and techiques prvodied by the Apostrophe core. 
+The e-commerce starter application aims to deliver a good starting point of Apostrophe CSM based e-commerce solutions, using the wide variety of features and techiques prvodied by the Apostrophe core.
 
 ## Try it on Codespaces
 
 You can try the starter kit on GitHub Codespaces. On the main page of the `apostrophecms/starter-kit-ecommerce` repository, under the "Template" dropdown, choose "Open in a codespace":
 
 ![Try it on Codespaces](../images/use-codespaces.webp)
 
-You can find a detailed guide at https://docs.github.com/en/codespaces/getting-started/quickstart using.
+You can find a detailed guide at <https://docs.github.com/en/codespaces/getting-started/quickstart> using.
 
 ::: tip
 When codespaces is initialized for a first time, it will take some time to install the dependencies and build the application. You can check the progress in the "Terminal" tab. Once the application is built, you can start the application via `npm run dev`.
@@ -29,16 +29,20 @@ You will need the proper Node.js environment, a MongoDB up and running, etc. Fol
 
 ### Method 1
 
-1. If you haven't already, install the [Apostrophe CLI tool](https://v3.docs.apostrophecms.org/guide/setting-up.html#the-apostrophe-cli-tool) using 
+1. If you haven't already, install the [Apostrophe CLI tool](https://docs.apostrophecms.org/guide/setting-up.html#the-apostrophe-cli-tool) using
+
    ``` sh
    npm install -g @apostrophecms/cli
    ```
-   
+
 2. Clone the project locally by navigating to the parent directory you want the repo installed within and run the command:
+
    ``` sh
    apos create my-project-name --starter=ecommerce
    ```
+
 3. Change to the new directory and run it:
+
    ``` sh
    npm run dev
    ```
@@ -50,6 +54,7 @@ You will need the proper Node.js environment, a MongoDB up and running, etc. Fol
 ![Use Template GitHub](../images/use-gh-template.png)
 
 2. Clone it (replace `user/repo-name` as appropriate)
+
 ```sh
 git clone [email protected]:user/repo-name.git
 ```
@@ -59,7 +64,9 @@ git clone [email protected]:user/repo-name.git
 ```sh
 npm install
 ```
+
 Optionally, you can update the core dependencies to the latest versions:
+
 ```sh
 npm update
 ```
@@ -73,13 +80,19 @@ npm run dev
 ## Initial configuration
 
 - Change the `shortName` value in your configuration in `app.js` note that installation using the CLI will complete this step automatically.
+
 ```js
-require('apostrophe')({
+import apostrophe from 'apostrophe';
+
+apostrophe({
+  root: import.meta,
   shortName: 'my-project-name',
   // ...rest of the configuration
 });
 ```
+
 - The control for restarting the application on change (dev mode only) has been moved to `modules/theme/index.js` compared to the default `starter-kit-essentials` application (`asset` module). If you want to disable this feature:
+
 ```js
 // modules/theme/index.js
 handlers(self) {
@@ -105,11 +118,8 @@ npm run start
 
 ## Architecture
 
-The starter kit is a standard Apostrophe CMS application, built on top of the official [`starter-kit-essentials`](https://github.com/apostrophecms/starter-kit-essentials) template. All the modules (including widgets) can be found in the `modules/` folder. You can learn more about the modules in the [Modules & Widgets](./modules-and-widgets.md) section. 
+The starter kit is a standard Apostrophe CMS application, built on top of the official [`starter-kit-essentials`](https://github.com/apostrophecms/starter-kit-essentials) template. All the modules (including widgets) can be found in the `modules/` folder. You can learn more about the modules in the [Modules & Widgets](./modules-and-widgets.md) section.
 
 The entire UI (except the product view page) lives in the `theme` module. The application uses a standard Tailwind CSS configuration. You can learn more in the [Branding & UI](./branding-and-ui.md) section.
 
 We have developed a tool for automated SVG sprites. It's seamlessly integrated and is explained in detail in the [Branding & UI](./branding-and-ui.md) section.
-
-
-

docs/postcss.config.js

@@ -0,0 +1,3 @@
+export default {
+  plugins: {}
+};

modules/@apostrophecms/admin-bar/index.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   options: {
     groups: [
       {

modules/@apostrophecms/asset/index.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   // When not in production, refresh the page on restart
   options: {
     refreshOnRestart: true

modules/@apostrophecms/attachment/index.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   options: {
     addFileGroups: [
       {

modules/@apostrophecms/express/index.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   options: {
     session: {
       // Set a real secret!

modules/@apostrophecms/global/index.js

@@ -78,7 +78,7 @@ const searchUrlScheme = {
 };
 delete searchUrlScheme.label;
 
-module.exports = {
+export default {
   fields: {
     add: {
       brandName: {

modules/@apostrophecms/home-page/index.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   options: {
     label: 'app:homePage'
   },

modules/@apostrophecms/page/index.js

@@ -12,7 +12,7 @@ if (process.env.NODE_ENV !== 'production') {
   // });
 }
 
-module.exports = {
+export default {
   options: {
     types: [
       {

modules/@apostrophecms/rich-text-widget/index.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   options: {
     defaultOptions: {
       toolbar: [

modules/@apostrophecms/search/index.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   options: {
     perPage: 15,
     suggestions: {

modules/@apostrophecms/search/views/index.html

@@ -14,7 +14,7 @@
     <section class="py-8 md:py-16">
       <form class="w-full flex items-center justify-center bg-gray-50 border border-gray rounded-md" data-apos-search-page-form method="GET" action="{{ data.url | e }}">
         <input type="search"
-        class="border-none w-full bg-transparent"
+        class="form-input border-none w-full bg-transparent"
           data-apos-search-field value="{{ data.query.q | e }}" name="q">
         {{ buttons.icon(
           'magnifying-glass', 

modules/@apostrophecms/settings/index.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   options: {
     subforms: {
       title: {

modules/blockquote-widget/index.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   extend: '@apostrophecms/widget-type',
   options: {
     label: 'app:blockquoteWidget'

modules/content-widget/index.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   extend: '@apostrophecms/widget-type',
   options: {
     label: 'app:contentWidget'

modules/cta-widget/index.js

@@ -98,7 +98,7 @@ const urlScheme = {
   }
 };
 
-module.exports = {
+export default {
   extend: '@apostrophecms/widget-type',
   options: {
     label: 'app:ctaWidget'

modules/default-page/index.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   extend: '@apostrophecms/page-type',
   options: {
     label: 'app:defaultPage'

modules/hero-full-widget/index.js

@@ -98,7 +98,7 @@ const urlScheme = {
   }
 };
 
-module.exports = {
+export default {
   extend: '@apostrophecms/widget-type',
   options: {
     label: 'app:heroFullWidget'

modules/hero-split-widget/index.js

@@ -98,7 +98,7 @@ const urlScheme = {
   }
 };
 
-module.exports = {
+export default {
   extend: '@apostrophecms/widget-type',
   options: {
     label: 'app:heroSplitWidget'

modules/i18n/index.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   i18n: {
     app: {
       browser: true

modules/product-category-page/index.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   extend: '@apostrophecms/piece-page-type',
   options: {
     label: 'app:productCategoryPageLabel',

modules/product-category-widget/index.js

@@ -103,7 +103,7 @@ const urlScheme = {
   }
 };
 
-module.exports = {
+export default {
   extend: '@apostrophecms/widget-type',
   options: {
     label: 'app:productCategoryWidget'

modules/product-category/index.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   extend: '@apostrophecms/piece-type',
   options: {
     alias: 'productCategory',

modules/product-featured-widget/index.js

@@ -103,7 +103,7 @@ const urlScheme = {
   }
 };
 
-module.exports = {
+export default {
   extend: '@apostrophecms/widget-type',
   options: {
     label: 'app:productFeaturedWidget'

modules/product-page/index.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   extend: '@apostrophecms/piece-page-type',
   options: {
     label: 'app:productPageLabel',

modules/product-widget/index.js

@@ -103,7 +103,7 @@ const urlScheme = {
   }
 };
 
-module.exports = {
+export default {
   extend: '@apostrophecms/widget-type',
   options: {
     label: 'app:productPluralLabel'

modules/product/index.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   extend: '@apostrophecms/piece-type',
   options: {
     alias: 'product',

modules/promo-widget/index.js

@@ -99,7 +99,7 @@ const urlScheme = {
   }
 };
 
-module.exports = {
+export default {
   extend: '@apostrophecms/widget-type',
   options: {
     label: 'app:promoWidget'

modules/tag/index.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   extend: '@apostrophecms/piece-type',
   options: {
     alias: 'tag',

modules/theme/index.js

@@ -1,7 +1,7 @@
+import fs from 'node:fs/promises';
+import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 
-const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
-
-module.exports = {
+export default {
   options: {
     alias: 'theme'
   },
@@ -26,11 +26,10 @@ module.exports = {
     }
   },
 
-  init(self) {
+  async init(self) {
     // Icon metadata
-    self.svgIcons = [];
     try {
-      self.svgIcons = require('./icons/icons.svg.json');
+      self.svgIcons = JSON.parse(await fs.readFile('./icons/icons.svg.json'));
     } catch (e) {
       self.apos.util.warn('No SVG icons found. Run `./scripts/make-svg-sprite` to generate them.');
     }