sliftutils

A build system and utility library for MobX + Preact projects.

Getting Started

$3

The first thing you should do is call the setup function. They will give you a lot of boilerplate code which you can delete or keep (I recommend commiting first, so you can pick which boilerplate changes you want):

``bash
npx slift-setup


or


npx sliftsetup
`

$3

After setup, you can either build your project or watch for changes:

#### Build Commands
`bash
npx build-nodejs # Build Node.js application
npx build-web # Build web application
npx build-extension # Build browser extension
npx build-electron # Build Electron application
`

#### Watch Commands
`bash
npx slift-watch --port 9876 "nodejs/.ts" "nodejs/.tsx" "yarn build-nodejs"
npx slift-watch --port 9877 "web/.ts" "web/.tsx" "yarn build-web"
npx slift-watch --port 9878 "extension/.ts" "extension/.tsx" "yarn build-extension"
npx slift-watch --port 9879 "electron/.ts" "electron/.tsx" "yarn build-electron"
`

$3

After building, you can call the run functions:

`bash
node ./build-nodejs/server.js # Run built Node.js app
node ./builders/webRun.js # Run web application
node ./node_modules/electron/cli.js ./build-electron/electronMain.js # Run Electron app
`

Or you can add your own scripts with special parameters if you want.

Hot Reloading

$3

You can optionally call the hot reloading function in your code if you want automatic reloading during development:

`typescript
import { enableHotReloading } from "sliftutils/builders/hotReload";

async function main() {
await enableHotReloading();
// Your application code here
}

main().catch(console.error);
`

$3

Node.js scripts can be called directly with typenode without needing to bundle them:

`bash
typenode ./nodejs/server.ts
`

When you call scripts directly with typenode, you can use hot reloading which allows you to hot reload per file by setting the module.hotreload flag or adding a hotreload.flag file.

#### Per-File Hot Reloading

To enable hot reloading for specific files, set the module.hotreload flag at the top of your file:

`typescript
// Either set this flag on the files you want to hot reload
module.hotreload = true;

export function exampleFunction() {
return "Hello from exampleFile.ts";
}
`

Alternatively, you can add a file called hotreload.flag in a folder, and everything in that folder and all child files will hot reload.

See nodejs/exampleFile.ts for an example of how to use the hot reload flag.

Utilities

This package includes many utilities for MobX + Preact projects. To see what utilities are available, read the index.d.ts` file in the package. The utilities will work with any MobX + Preact type projects.

License

MIT