Skip to content
/ vitepress Public

Shared vite configs across TGHP WordPress projects

Notifications You must be signed in to change notification settings

tghp/vitepress

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vitepress

An opinionated, pre-structured approach to building using vite for WordPress projects.

Pre-determined Structure

Vitepress will:

  • Look at the primary theme in src/themes, it can only handle one, but documentation for how to support multiple will come later.
  • Compile each script found using this glob: src/themes/{theme}/assets/src/js/*.js. Any scripts in sub-folders will not compile and should be used for organisational purposees. See @tghp/groundwork.js
  • Compile each SCSS stylesheet found using this glob: src/themes/{theme}/assets/src/sass/*.scss
  • Put the compiled assets in src/themes/{theme}/assets/dist

Using vitepress

  1. Install vitepress: npm i -d @tghp/vitepress

  2. Add the following to a file named vite.config.mts. Behaviour can be modified by using options defined later.

    import vitepress from '@tghp/vitepress';
    
    export default vitepress({
      root: __dirname,
    });
  3. Add scripts to your package.json:

    {
      "scripts": {
        "dev": "vite build --mode=watch",
        "build": "vite build"
      }
    }

Options

Key Value
react Enables React transpiling allowing JSX/TSX.
preact Used in conjuction with react: true, Vite will make necessary changes to allow preact to work. You'll also want to add jsxImportSource to your tsconfig.json for the best IDE experience (see below).

Technology specific

React (or Preact)

If you are using React, you will need to add the following pass react as true to the vitepress options.

For Preact, pass preact as true instead and add "jsxImportSource": "preact" to tsconfig.json compilerOptions. For smaller/simpler usage of React in websites, Preact is the recommended option.

SVGs

We add support for SVGs via vite-plugin-svgr allowing importing of SVGs as follows:

import { ReactComponent as Logo } from './logo.svg';

About

Shared vite configs across TGHP WordPress projects

Resources

Stars

Watchers

Forks

Packages

No packages published