Additional Resources
On this page are additional resources that you may find beneficial.
Add JavaScript Bundling To Your Trio Projects
Trio v6.0.1+ makes it easier to integrate external processes, such as those for bundling your site's Javascript, into your projects. To help you get started a demo project that uses Parcel to bundle JavaScript can be found here.
ESLint Support For Your JavaScript
A shareable ESLint configuration package is available for you to install and use in your Trio projects, which will install ESLint and all its dependencies. This package extends eslint-config-standard, so out of the box it comes with sensible default rules which, of course, you are able to override and extend.
To install this package in your projects, please follow the instructions below:
- If your project doesn't already have a package.json file, create one by opening a terminal, navigating to your project's root folder, and running the following command:
npm init -y
- Now run the following command in your terminal to install the shareable ESLint configuration package:
npm i --save-dev @4awpawz/eslint-config-4awpawzconfig
- In your project's root folder create a new file and name it .eslintrc.json. Now copy the following
into this new file and save this file.{ "extends": "@4awpawz/eslint-config-4awpawzconfig" }
An NPM Package For Importing Uncached Modules
When your tag-based callbacks and filter functions have their own internal module dependencies, you should import those dependencies using import-fresh (or some similar package) to guarantee that you are always importing fresh, uncached copies of them and they reflect your most recent changes.
To install import-fresh in your projects, please follow the instructions below:
- If your project doesn't already have a package.json file, create one by opening a terminal, navigating to your project's root folder, and running the following command:
npm init -y
- Now run the following command in your terminal to install the import-fresh package:
npm i --save-dev import-fresh
Use import-fresh in your tag-based callbacks and your filter functions just as you would use Node's built-in global require:
const importFresh = require("import-fresh");
const someDependency = importFresh("./lib/someModule");
Visual Studio Code Snippets
Trio specific code snippets are available here, and include support for the following:
- fragment, include and tag-based callback front-matter blocks
- data-trio-* tag attributes
HTML Syntax Highlighting Support For ES6 Multiline Strings
You can easily add HTML syntax highlighting to your JavaScript's multi line strings by installing this Visual Studio Code es6-string-html plugin.
Your Financial Support Of This Project Is Greatly Appreciated
Trio is an open source project and is therefore free of charge to use both for noncommercial and commercial use, but when you use Trio to create a new website, please consider donating a few bucks. It doesn't take very long, the process is secure, and it will allow us to continue to support the community and to maintain and enhance Trio going forward.