Skip to content

A plugin for Vite enables you to compile a Gren application/document/element

License

Notifications You must be signed in to change notification settings

gabriela-sartori/vite-plugin-gren

 
 

Repository files navigation

vite-plugin-gren

npm GitHub Workflow Status

A plugin enables you to compile a Gren application/document/element on your Vite project. Hot module replacement works roughly in development.

import { Gren } from './MyApplication.gren'

Gren.MyApplication.init()

Setup

npm i -D vite-plugin-gren

Update vite.config.(js|ts)

import { defineConfig } from 'vite'
import grenPlugin from 'vite-plugin-gren'

export default defineConfig({
  plugins: [grenPlugin()]
})

Then you can import .gren file like:

import { Gren } from './Hello.gren'

then

// Mount "Hello" Browser.{element,document} on #root
Gren.Hello.init({
  node: document.getElementById('root'),
  flags: "Initial Message"
})

See /example dir to play with an actual Vite project. And this working website may help you to learn how to use.

Plugin Options

debug (Default: process.env.NODE_ENV !== 'production')

By giving a boolean, can control debug mode of Gren (means toggle Gren Debugger)

image

import { defineConfig } from 'vite'
import grenPlugin from 'vite-plugin-gren'

export default defineConfig({
  plugins: [grenPlugin({ debug: false })]
})

When it's false, disables debug mode in both development and production. Conversely, enables debug mode even in production by true. When production build gets debug mode, Gren's compile optimization doesn't happen.

optimize (Default: !debug && process.env.NODE_ENV === 'production')

By giving a boolean, can control build optimization, useful to use Debug gren functions

import { defineConfig } from 'vite'
import grenPlugin from 'vite-plugin-gren'

export default defineConfig({
  plugins: [grenPlugin({ debug: false, optimize: false })]
})

When true, optimize build and forbid usage of Debug gren functions. When specify optimize attribute, had to tell if need to debug or not. It's not why you want to make debug traces you want to see all actions.

Static Assets Handling

This plugin supports importing assets by giving a particular tag [VITE_PLUGIN_GREN_ASSET:<path to asset>] to leverage Vite's asset handling. When Gren code has a string, this plugin replaces it with an imported asset. That string should be just a string without any concatenation.

Html.img [ Html.Attributes.src "[VITE_PLUGIN_GREN_ASSET:/assets/logo.jpg]" ] []

Combine multiple main files (Experimental from 2.7.0-beta.1)

By passing importing path via with URL-ish parameter(s), the plugin compiles multiple main files in a single compilation process. That generates a single Gren export which has multiple properties for each given main files. This way reduces bundle size comparing to a total size of importing each file separately since common modules/Gren core codes are not repeated.

// `Gren.App` and `Gren.Another`, both can work as like importing individually.
import { Gren } from './App.gren?with=./Another.gren'

Gren.App.init({
  node: document.getElementById('rootForApp'),
})
Gren.Another.init({
  node: document.getElementById('rootForAnother'),
})

For 3+ main files:

import { Gren } from './App.gren?with=./Another.gren&with=./YetAnother.gren'

Acknowledgement

License

MIT

About

A plugin for Vite enables you to compile a Gren application/document/element

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 54.3%
  • JavaScript 32.8%
  • Elm 10.8%
  • HTML 2.1%