Componette

Componette

mskocik

mskocik / vinette v1.0.0

Simple utility to connect nette apps with vite

download-cloud-line composer require mskocik/vinette

Vinette - Vite + Nette

Easy to use vite connector to nette apps. Based on lubomirblazekcz/nette-vite and transformed into extension.

Install

Download extension.

composer require mskocik/vinette

Register it into your Nette application. It automatically adds asset filter and $vite property to your templates.

extensions:
	vite: Mskocik\Vinette\Bridges\NetteDI\ViteExtension

vite:
	manifest: assets/build/manifest.json    # public path local from real www dir
	wwwDir: <string>                        # can be omitted if it's 'www'
	devServer: http://localhost:5174        # can be omitted if your are using default 'http://localhost:5174'

Usage in templates

You can use filter asset to set path to asset properly.

<link rel="stylesheet" href="{='src/css/style.css'|asset}">
<script src="{='src/js/bundle.js'|asset}" type="module">

Or in case you have JS files which imports some CSS files, you should use printTags() method. $vite variable is automatically injected into your templates.

{$vite->printTags('src/js/components.js')|noescape}

// which can result into:

// DEV
<script type="module" src="http://localhost:5174/src/js/components.js"></script>

// PRODUCTION
<link rel="stylesheet" href="/assets/build/components-1b96c47d.css">
<script type="module" src="/assets/build/components-8b95eb03.js"></script>

Dev mode toggle

Dev mode is enabled/toggled by clicking on the Vite icon in the tracy bar. By default it's disabled, using production build assets.

Icon Status
Production mode Production mode. Assets are being served according to definition in `manifest.json. Icon is semitransparent
Enabled, running Dev mode enabled, serving assets directly from vite devServer
Enabled, not running Dev mode enabled, but vite devServer is not running

Reference Vite config

Reference vite.config.js file I am using very often (includes svelte for custom elements and tailwind)

import FastGlob from 'fast-glob'
import { resolve } from 'path';
import { defineConfig, loadEnv } from 'vite';

import tailwindcss from 'tailwindcss'
import tailwindcssNesting from 'tailwindcss/nesting/index.js'
import autoprefixer from 'autoprefixer'
import postcssImport from 'postcss-import';
import postcssNested from 'postcss-nested';
import postcssCustomMedia from 'postcss-custom-media';
import { svelte } from '@sveltejs/vite-plugin-svelte'

const reload = {
  name: 'reload',
  handleHotUpdate({ file, server }) {
    if (!file.includes('temp') && file.endsWith(".php") || file.endsWith(".latte")) {
      server.ws.send({
        type: 'full-reload',
        path: '*',
      });
    }
  }
}

/** @type {import('vite').UserConfig} */
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), 'DEV');

  return {
    plugins: [svelte(), reload],
    css: {
      postcss: {
        plugins: [postcssImport, tailwindcssNesting(postcssNested), postcssCustomMedia, tailwindcss, autoprefixer]
      }
    },
    server: {
      port: env.DEV_PORT || 5174,
      strictPort: true,
      watch: {
        ignored: ['!^src', '!**/app/**/*.latte']
      },
      hmr: {
        host: 'localhost',
        port: 5137,
        protocol: 'ws'
      }
    },
    build: {
      manifest: true,
      outDir: "www/assets/build",
      emptyOutDir: true,
      rollupOptions: {
        input: FastGlob.sync(['./src/js/*.js', './src/css/*.css']).map(entry => resolve(process.cwd(), entry)),
      },
      assetsDir: '',
    }
  }
})

Licence

MIT

  • v1.0.0

    🎉 Public release

    Extension available to use for everyone

bar-chart-fill

Statistics

download-cloud-fill
103
star-fill
1
bug-fill
2
flashlight-fill
55d
price-tag-2-line

Badges

guide-fill

Dependencies

Componette Componette felix@nette.org