sarsamurmu / reboost

A super fast dev server for rapid web development

Hi there 👋

I am Sarsa. I like to work on open-source projects in my free time. Check out my repositories for more!

• 🔭 I’m currently doing nothing.
• 📫 How to reach me: Twitter DM, Telegram

reboost's Issues

Unable to resolve path aliases

reboost: 0.16.1

reboost.js

const { start } = require('reboost');

start({
  entries: [
    ['./src/components/my-element/index.js', './public/dist/index.js']
  ],
  contentServer: {
    root: './public',
    open: true
  },
  resolve: {
    alias: {
      Icons: './public/dist/assets/icons'
    }
  }
});

index.js

import { a, b, c } from 'Icons/icons.js';
...

Unfortunately, it fails displaying Unable to resolve path "Icons/icons" of ".../index.js

But, by using

import { a, b, c } from '../../../public/dist/assets/icons/icons.js';

it works as expected.

Do I miss something? Are there any prerequisites?

UsePlugin(singleArgument:{}) repetition

UsePlugin({...}) accepts only one argument. Although more than once of it can be used in plugins options (I suspect so) (can't they?), don't you think that you don't stay DRY? Plugins are often declared once. I have seen this implementation also in snowpack scripts, lately! Wouldn't be better instead of:

plugins: [
    UsePlugin({
      include: /.(png|jpg|jpeg)$/i,
      use: FilePlugin()
    }),
    UsePlugin({
      include: /.*/,
      exclude: /node_modules/,
      use: BabelPlugin()
    }),
...

to write something like:

plugins: [
    UsePlugin(
      {
        include: /.(png|jpg|jpeg)$/i,
        use: FilePlugin()
      },
      {
        include: /.*/,
        exclude: /node_modules/,
        use: BabelPlugin()
      }),
...

or, in the form of UsePlugin([ {}, {}, ... ]).

resolve.cachePredicate : () => boolean (enhanced-resolve) mismatch type declaration

"reboost": "^0.8.0"

cachePredicate: function() { return true } gives an error. See photo below.

"lit-element" stopped getting rendered

reboost: 0.12.0
lit-element: 2.4.0
template: lit-element
reboost.js: default

Regardless of commonJSInterop.mode value, rendering of lit-elements is over.

"contentServer.open : boolean | object" mismatch type declaration

When reboost.js lies in the root dir the open: true option is accepted without complain.

But when reboost.js lies in a dir like ./.config/reboost/ then open: true option is NOT accepted. See photo below.

Serving/opening more than one html files at the same time

I practically face the following problem: Very often, I need to change to a different html page among a number of them.

The first solution is to start separately the server for each page, but it is not so elegant and sophisticated at all!

The second and obvious solution is, every time, to (un)comment the relevant pages in contentServer.index and restart the server. It's very boring!

The third solution is to put all pages as links inside a main page with the rest of the files and call them from there. It's Ok but not the ideal!

The fourth solution is contentServer.index can also accept an array of pages. In this case, for each html page server creates a list of watched files. When a watched file changes, server finds the corresponding page and reload it. If the file is common to more than one html pages than all relevant pages are reloaded. Does it make sense?

In addition, server would automatically open only the first page or all of them found in the array, one by one in different tabs or windows.

What do you think?

Tia

How to pass a plugin config object to the plugin itself during bootstrap

I have had a look at all plugins. Unfortunately, I cannot still figure out a standard way how to pass a plugin config object, e.g.

start({ // `Reboost` config object
  ...
  plugins: [
    samplePlugin({ // `samplePlugin` config object
      pluginSpecificOptions 
    })
  ]
});

into .../plugin-sample/src/index.ts samplePlugin function when Reboost starts.

• config argument of setup function is the entire Reboost config object
• this.config is the entire Reboost config object, too. In addition, it is not available in setup function.

I have seen that, most of the times, an empty object is passed in options argument of the function:

export const CSSPlugin = (options: CSSPluginOptions = {}): ReboostPlugin => {,
export = (options: Babel.TransformOptions = {}): ReboostPlugin => {...,
export const esbuildPlugin = (options: esbuildPluginOptions = {}): ReboostPlugin => {...,
export const PostCSSPlugin = (options: PostCSSPluginOptions = {}): ReboostPlugin => ({
export = (options: SveltePluginOptions = {}): ReboostPlugin => {
or, even simpler
export = (options: Options = {}): ReboostPlugin => {

Please, enlighten me. Tia

Unable to import css files

After import cssStyles from './styles.module.css' and <div>${JSON.stringify(cssStyles)}</div> I get an empty object.

Do I miss something?

"contentServer" mismatch type declaration

contentServer gives an error, either writing:

contentServer: contentServerConfig,

or

  contentServer: {
    ...contentServerConfig,
    open: {
      app: 'firefox'
    }
  },

See photo below.

plugin-litcss upgrade

No more Lit-Element, only Lit! Tia

"includeDefaultPlugins" config option

Since you give the option (freedom) for default plugins (CSSPlugin and esbuildPlugin) not to be included (i.e. to get disabled), it may would be better to cancel the term "default" and make both of them select-able as the rest ones. They are not needed to be enabled by default.

Under the same thought, also the term built-in may would be cancelled.

So, you will have by default a fully modular dev environment!

Further, you could adopt categories such as:

• Auxiliary
  • FilePlugin
  • ReplacePlugin
  • UsePlugin
  • etc
• CSS
  • CSSPlugin
  • LitCSSPlugin
  • PostCSSPlugin
  • SassPlugin
  • etc
• Transformers
  • BabelPlugin
  • esbuildPlugin
  • etc
• Frameworks
  • ReactRefreshPlugin
  • SveltePlugin
  • VuePlugin
  • etc
• etc

I think it's simpler and more straight. One can choose whatever wants to work with.

"index.js" change rendering sometimes malfunctions

"reboost": "0.10.0"

1st change in index.js is recorded, but it is not rendered!
Subsequent (2nd) change is normally rendered.

"Extends" property

I suggest the use of extends: string<path_to_foreign_config_file> property in options which are related to foreign packages configuration. In this manner, the reboost's own options are kept separate from the foreign ones.

For example, in contentServer, resolve, chokidar, PostCSSPlugin, esbuildPlugin, BabelPlugin, etc.

There are people who like having a main config file, like windows "registry", and others who prefer working with many small config files. Just give them the freedom to choose and keep them satisfied.

Page not reloaded when css file changes

Problem
Web page is not reloaded when a change in css file occurs.

Notes

• Change is logged as expected.
• .reboost_cache was also erased; nothing changed.

Version
reboost: 0.17.0

Files

package.json

{
  "name": "reboost-test",
  "version": "0.0.1",
  "description": "",
  "scripts": {
    "dev": "node reboost"
  },
  "license": "MIT",
  "devDependencies": {
    "reboost": "^0.17.0"
  },
  "dependencies": {
    "lit-element": "^2.4.0",
    "lit-html": "^1.3.0"
  }
}

reboost.js

const {
  start,
  builtInPlugins: {
    CSSPlugin,
    esbuildPlugin,
  }
} = require('reboost');

start({
  entries: [
    ['./src/index.js', './public/dist/index.js']
  ],
  contentServer: {
    root: './public',
    open: { app: '/usr/bin/waterfox-current' }
  },
  plugins: [
    esbuildPlugin({ target: 'es2015' }),
    CSSPlugin()
  ]
});

index.js

import { LitElement, customElement, css, unsafeCSS, html } from 'lit-element';
import cssStyles from './styles.css';

@customElement('my-element')
export class MyElement extends LitElement {
  static get styles() {
    return css`${unsafeCSS(cssStyles)}`; /* or */
    // return css`${unsafeCSS(cssStyles.toString())}`;
  }

  render() {
    return html`
      <div class="background"></div>
      <div class="main">
        <p>
          Get started by editing
          <code>src/index.js</code> and <code>public/index.html</code>
        </p>
      </div>
    `
  }
}

style.css

.main {
  /* position: fixed; */
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.2rem;
  text-align: center;
  font-family: sans-serif;
  color: white;
  background-color: #2a2938;
  padding: 20px;
}

"contentServer.port" does not fallback to a random port when the given port is unavailable

reboost: 0.10.1, default reboost.js in default location

Although contentServer.port is not set, the port used is not random but always 8000.

public/index.html change never triggers reloading

"reboost": "0.9.1"

reboost.js

const { start } = require('reboost');

start({
  entries: [
    ['./src/index.js', './public/dist/index.js']
  ],
  contentServer: {
    root: './public',
    open: true
  }
});

src/index.js

- position: fixed;
+ position: relative;

public/index.html

...
  <body>
    <p>Welcome Reboost!</p>
    <my-element></my-element>
  </body>
...

public/index.html page auto-reloading does fail. Do I miss something obvious and important?

Error: EISDIR: illegal operation on a directory, read

I'm getting the following error when reboost tries to serve:

/node_modules/apollo-upload-client/lib which I am important as import { createUploadLink } from "apollo-upload-client"

[reboost] Unable to resolve path "firebase/app"

I receive the following error when trying to import firebase:

import firebase from "firebase/app"
import "firebase/auth

tailwindcss not work

tailwindcss not work

main.css

@tailwind base;
@tailwind components;
@tailwind utilities;

h1 {
    color: indianred;
    @apply: text-3xl
}

reboost.js

const {start, DefaultConfig} = require('reboost');
const SveltePlugin = require('@reboost/plugin-svelte');
const VuePlugin = require('@reboost/plugin-vue');
const PostCSSPlugin = require('@reboost/plugin-postcss');

start({
    entries: [
        ['./src/main.js', './static/dist/main.js'],
    ],
    // contentServer: {
    //   root: './static',
    //   open: false
    // },
    // resolve: {
    //     extensions: ['.vue', '.svelte'].concat(DefaultConfig.resolve.extensions),
    //     mainFields: ['.vue', 'svelte', ...DefaultConfig.resolve.mainFields]
    // },
    plugins: [
        SveltePlugin(),
        VuePlugin(),
        PostCSSPlugin({
            // Options
        })
    ]
});

home.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="module" src="{{ url_for('static', path='/dist/main.js') }}"></script>
</head>
<body class="bg-black">
<div id="svelteApp"></div>
<div id="vueApp"></div>
</body>
</html>

main.js

import "./main.css"

import App from './App.svelte';

const app = new App({
  target: document.getElementById("svelteApp"),
  props: {
    // Props
  }
});

// window.app = app;
//
// export default app;


import { createApp } from 'vue';
import App2 from './App.vue';

createApp(App2).mount('#vueApp');

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, 
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

@reboost/create does not work

After

npm init @reboost/create

I get the following:

npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@reboost%2fcreate-create - Not found
npm ERR! 404 
npm ERR! 404  '@reboost/create-create@latest' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
...

Errors

When it starts for first time after booting, I get the following error. After a couple of times of page reloading, I continue getting the same error. Moreover, lit-element never gets rendered.

$ node reboost.js
[reboost] Plugin change detected, clearing cached files...
[reboost] Clear cache complete
[reboost] Starting proxy server...
[reboost] Generated: ./src/index.js -> ./public/dist/index.js
[reboost] Proxy server started
[reboost] Content server started at: http://localhost:8000
[reboost] Content server started at: http://192.168.1.53:8001

  Error: ENOENT: no such file or directory, open '.../reboost-le/.reboost_cache/files/2d19f0273042a924a4c98d7656d424dd'
      at Object.openSync (fs.js:465:3)
      at Object.readFileSync (fs.js:368:35)
      at .../reboost-le/node_modules/reboost/dist/node/file-handler.js:156:107
      at processTicksAndRejections (internal/process/task_queues.js:93:5)
      at async cors (.../reboost-le/node_modules/@koa/cors/index.js:98:16)

(node:20536) Warning: Label 'Response time - src/index.js' already exists for console.time()
(Use `node --trace-warnings ...` to show where the warning was created)

  Error: ENOENT: no such file or directory, open '.../reboost-le/.reboost_cache/files/2d19f0273042a924a4c98d7656d424dd'
      at Object.openSync (fs.js:465:3)
      at Object.readFileSync (fs.js:368:35)
      at .../reboost-le/node_modules/reboost/dist/node/file-handler.js:156:107
      at processTicksAndRejections (internal/process/task_queues.js:93:5)
      at async cors (.../reboost-le/node_modules/@koa/cors/index.js:98:16)

(node:20536) Warning: Label 'Response time - src/index.js' already exists for console.time()

  Error: ENOENT: no such file or directory, open '.../reboost-le/.reboost_cache/files/2d19f0273042a924a4c98d7656d424dd'
      at Object.openSync (fs.js:465:3)
      at Object.readFileSync (fs.js:368:35)
      at .../reboost-le/node_modules/reboost/dist/node/file-handler.js:156:107
      at processTicksAndRejections (internal/process/task_queues.js:93:5)
      at async cors (.../reboost-le/node_modules/@koa/cors/index.js:98:16)

(node:20536) Warning: Label 'Response time - src/index.js' already exists for console.time()

  Error: ENOENT: no such file or directory, open '.../reboost-le/.reboost_cache/files/2d19f0273042a924a4c98d7656d424dd'
      at Object.openSync (fs.js:465:3)
      at Object.readFileSync (fs.js:368:35)
      at .../reboost-le/node_modules/reboost/dist/node/file-handler.js:156:107
      at processTicksAndRejections (internal/process/task_queues.js:93:5)
      at async cors (.../reboost-le/node_modules/@koa/cors/index.js:98:16)

After restarting (2nd start)

^C
$ node reboost.js

(but not rebooting), I get the following:

$ node reboost.js
[reboost] Refreshing cache...
[reboost] Refresh cache complete
[reboost] Starting proxy server...
[reboost] Generated: ./src/index.js -> ./public/dist/index.js
[reboost] Proxy server started
[reboost] Content server started at: http://localhost:8000
[reboost] Content server started at: http://192.168.1.53:8001
(node:25094) Warning: Label 'Response time - src/index.js' already exists for console.time()
(Use `node --trace-warnings ...` to show where the warning was created)
Response time - src/index.js: 1.302s
(node:25094) Warning: No such label 'Response time - src/index.js' for console.timeEnd()
(node:25094) Warning: Label 'Response time - node_modules/lit-element/lit-element.js' already exists for console.time()
Response time - node_modules/lit-element/lit-element.js: 791.467ms
(node:25094) Warning: No such label 'Response time - node_modules/lit-element/lit-element.js' for console.timeEnd()
Response time - node_modules/lit-element/lib/updating-element.js: 776.126ms
...
(node:25094) Warning: Label 'Response time - node_modules/lit-html/lib/default-template-processor.js' already exists for console.time()
Response time - node_modules/lit-html/lib/directive.js: 234.986ms
Response time - node_modules/lit-html/lib/default-template-processor.js: 298.26ms
(node:25094) Warning: No such label 'Response time - node_modules/lit-html/lib/default-template-processor.js' for console.timeEnd()
Response time - node_modules/lit-html/lib/template-result.js: 270.865ms
...

lit-element is rendered.

After restarting (3rd start), no more errors, it works fine.

I have used the default reboost.js + showResponseTime: true in the default location. Latest updates.

PostCSSPlugin - How to pass the "path" of PostCSS Config Directory

In postcss-loader mentions that:

Object

Name	Type	Default	Description
path	{String}	undefined	PostCSS Config Directory
context	{Object}	undefined	PostCSS Config Context

implying that:

  options: {
    ...
    config: {
      path: '.config/postcss/', ✅
      ctx: { }
    }
  }

How can I pass the path through ctx in PostCSSPlugin?

log.exportResolvedPaths { local_options }

A problem which I usually face, and probably other users, too, is the correct declaration of relative paths, especially of those ones which are related to foreign packages/modules config options.

I suggest a new option to be created; the log.exportResolvedPaths one, which records all resolved options paths in a user friendly form such as:

relative_file_path, absolute_file_path, Option.property_name, relative_path_set, ABOSLUTE_PATH_resolved

and exports them either to the terminal or to a file.

local_options would include properties such as:

include, exclude, columnsDisplayed: string[], exportTo: terminal|'path_to_log_file'

Moreover, showResponseTime option would also be moved under the log option as log.showResponseTime.

Additional notes:

• Instead of an option, it could be a plugin.
• A maxFilesNo property may be set, to control the files per directory that are exported when regex is used.

esbuild and Babel

Both esbuild and Babel can transform TypeScript, JSX, or newer ECMAScript features. Ok, esbuild can also do bundling (not included in the project) and minifying (included in the project).

If someone decides to install and work with Babel, what is the reason of existence of esbuild? Can it then be uninstalled?

I feel that reboost should be a robust HMR server.

I just tested it and found that using django's server as the development server, turn off the reboost contentServer setting, and then set ['./src/main.js','./static/dist/main.js'], , then Mapping django's /staic url to the static local folder is more convenient.

What are the advantages of reboost over snowpack?

django + reboost + (svelte + vue + ...)
caddy + reboost + (svelte + vue + ...)

Easy to use and quick to get started.

My purpose in doing this is to make full use of the functions of the server-side framework, especially routing, templates, sessions, authentication, etc., and to combine the functions of various front-end languages and frameworks.

very good, I feel that reboost should be a robust HMR server.

const {start, DefaultConfig} = require('reboost');
const SveltePlugin = require('@reboost/plugin-svelte');
const VuePlugin = require('@reboost/plugin-vue');
const PostCSSPlugin = require('@reboost/plugin-postcss');

start({
    entries: [
        ['./src/main.js', './static/dist/main.js'],
    ],
    // contentServer: {
    //   root: './static',
    //   open: false,
    //   proxy: {
    //      '/test': 'http://127.0.0.1:8000',
    //    }
    // },
    // resolve: {
    //     extensions: ['.vue', '.svelte'].concat(DefaultConfig.resolve.extensions),
    //     mainFields: ['svelte', ...DefaultConfig.resolve.mainFields]
    // },
    plugins: [
        SveltePlugin(),
        VuePlugin(),
        PostCSSPlugin({
            // Options
        })
    ]
});

django template

home.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="module" src="{{ url_for('static', path='/dist/main.js') }}"></script>
</head>
<body>
<div id="svelteApp"></div>
<div id="vueApp"></div>
</body>
</html>

django views.py

def home(request):
    return templates.TemplateResponse("/home.html", {"request": request})

contentServer.br: boolean (koa-static) mismatch type declaration

Based on the documentation which refers that

... It supports all the options of koa-static and some extra options...

contentServer.br: true gives an error. See photo below.

HR fails when watchOptions.exclude includes cacheDir

"reboost": "0.9.1"

reboost.js

const { start } = require('reboost');

start({
  entries: [
    ['./src/index.js', './public/dist/index.js']
  ],
  contentServer: {
    root: './public',
    open: true
  },
  watchOptions: {
    include: /.*/,
    exclude: /\.config|\.reboost_cache|node_modules/,
    chokidar: {}
  }
});

In this case, page auto-reloading does fail. If it is right, documentation should mention that.

Contradiction and confusion

manually-creating-an-app mentions:

and the HTML content (public/index.html)

<!doctype html>
<html>
 <body>
   <!-- Note that the type is "module" -->
   <script type="module" src="./dist/bundle.js"></script>
 </body>
</html>

then create a file named reboost.js

const { start } = require('reboost');

start({
 entries: [
   // Format - [inputPath, outputPath]
   ['./src/index.js', './public/dist/bundle.js']
 ],
 contentServer: {
   root: './public',
   open: true // Opens the browser
 }
})

By using bundle.js, an initial wrong impression is given that Reboost also carries out bundling. One, visiting the site quickly to see what it is about, reads something about bundl* and leaves; maybe no interested anymore in reading further either the Note which declares the opposite or the last question in FAQs/Troubleshooting.

"index.html" change message is not diplayed on the terminal

"reboost": "0.10.0"

Although index.html has changed, the corresponding record is not displayed.

$ node reboost.js
[reboost] Refreshing cache...
[reboost] Refresh cache complete
[reboost] Starting proxy server...
[reboost] Generated: ./src/index.js -> ./public/dist/index.js
[reboost] Proxy server started
[reboost] Content server started at: http://localhost:8000
Changed: src/index.js
Changed: src/index.js
Changed: src/index.js
Changed: src/index.js

Unable to resolve import "prop-types" (reboost)

I want to test and install monaco-react, but I get the following errors

Monaco.jsx

import React from "react";
import ReactDOM from "react-dom";

import Editor from '@monaco-editor/react';

const App = () => <Editor height="90vh" language="javascript" />;

const monacoElement = document.getElementById("monaco");
ReactDOM.render(<App />, monacoElement);

"esbuildPlugin - jsx.target" mismatch type declaration

In esbuildPlugin, jsx.target property gives an error. See photo below.

PostCSSPlugin - error not caught

Error path.join(__dirname, {}, 'tailwindCSS/tailwindcss.config.js') is not caught. It seems that postcss.config.js does not get parsed at all.

Workspace

root/
  .config_files/
    postCSS/
      tailwindCSS/
        tailwindcss.config.js
      postcss.config.js
    

package.json

...
  "devDependencies": {
    "reboost": "^0.12.1"
  },
  "dependencies": {
    "lit-element": "^2.4.0",
    "tailwindcss": "1.7.6"

reboost.js

...
start({
  ...
  plugins: [
    PostCSSPlugin(
      {
        path: path.join(process.cwd(), '.config_files/postCSS'),
      //path: path.join(process.cwd(), {}, '.config_files/postCSS'), this error is caught
        ctx: { }
      }
    )
  ]
})

postcss.config.js

const path = require('path');

module.exports = ({ file, ctx, env }) => ({
  plugins: [
    require('tailwindcss')(path.join(__dirname, {}, 'tailwindCSS/tailwindcss.config.js')) // this error is not caught
  ]
})

Identifier '__Runtime' has already been declared. (ReactRefreshPlugin)

I want to test placing svelte app, vue app, react app on the same page, if you just put svlet app and vue ap on the same page, there is no problem, but when I configure ReactRefreshPlugin, the command line shows conflict ：Identifier'__Runtime' has already been declared

node reboost

Error while parsing "/Users/jet/github/fastapi-reboost-app/src/main.js"
You may need proper loader to handle this kind of files.

  12 |     window.$RefreshSig$ = __Runtime.createSignatureFunction;
  13 | 
> 14 |   import*as __Runtime from"/Users/jet/github/fastapi-reboost-app/node_modules/@reboost/plugin-react-refresh/dist/browser/runtime.js";import{hot as ReboostHot}from'reboost/hot';const __prevRefreshReg=window.$RefreshReg$;const __prevRefreshSig=window.$RefreshSig$;window.$RefreshReg$=(type,id)=>{const fullId=ReboostHot.id+' '+id;__Runtime.register(type,fullId);};window.$RefreshSig$=__Runtime.createSignatureFunction;import"tailwindcss/tailwind.css";import"./main.css";import App2 from"./App.svelte";const app=new App2({target:document.getElementById("svelteApp"),props:{}});window.app=app;export default app;import{createApp}from"vue";import App22 from"./App.vue";createApp(App22).mount("#vueApp");;window.$RefreshReg$=__prevRefreshReg;window.$RefreshSig$=__prevRefreshSig;ReboostHot.self.accept(updatedModule=>{if(__Runtime.isReactRefreshBoundary(updatedModule)){__Runtime.performReactRefresh();}else{ReboostHot.invalidate();}});;
     |            ^ Identifier '__Runtime' has already been declared
  15 |     window.$RefreshReg$ = __prevRefreshReg;
  16 |     window.$RefreshSig$ = __prevRefreshSig;

reboost.js

const {
    start,
    builtInPlugins: {
        UsePlugin
    }
} = require('reboost');
const SveltePlugin = require('@reboost/plugin-svelte');
const VuePlugin = require('@reboost/plugin-vue');
const ReactRefreshPlugin = require('@reboost/plugin-react-refresh');
const PostCSSPlugin = require('@reboost/plugin-postcss');

start({
    entries: [
        ['./src/main.js', './static/dist/main.js'],
        // ['./src/react/App3.jsx', './static/dist/react.js'],
    ],
    // contentServer: {
    //   root: './static',
    //   open: false
    // },
    // resolve: {
    //     extensions: ['.vue', '.svelte'].concat(DefaultConfig.resolve.extensions),
    //     mainFields: ['.vue', 'svelte', ...DefaultConfig.resolve.mainFields]
    // },
    plugins: [
        UsePlugin({
            // The following regex enables fast refresh for files
            // with .js, .ts, .jsx or .tsx extensions
            // Feel free to use any regex for your files
            include: /\.[jt]sx?$/i,
            use: ReactRefreshPlugin()
        }),
        SveltePlugin(),
        VuePlugin(),
        ReactRefreshPlugin(),
        PostCSSPlugin({
            // Options
        }),

    ]
});

Moving "jsconfig.json" from project root in "Lit-Element" template

jsconfig.json lying in project root overwrites the corresponding options of tsconfig.json in "lit-element" package, doesn't it? Where exactly is the entry/read point of jsconfig.json file? I would like to move it to another directory, if possible.

Changes of files being watched are not displayed.

reboost: 0.10.1, default reboost.js in default location

Files like reboost.js and package. json, although being watched (watchOptions.include: /.*/ Default and watchOptions.exclude: /node_modules/ Default), their changes are not displayed.

Does it support route?

Does it support route?

Error while importing awaitable-timers

After typing npm i awaitable-timers and

import {
  setTimeout,
  setImmediate,
  setInterval
} from 'awaitable-timers';

I get the following errors:

where

awaitable-timers/index.js

'use strict';

// Use the built-in implementations if they are present.
try {
  const {
    setTimeout,
    setImmediate,
    setInterval,
  } = require('timers/promises');

  module.exports = {
    setTimeout,
    setImmediate,
    setInterval,
  };

  return;
} catch {
  // Do nothing with the error.
}
...

Any suggestion? Tia

log.exportOptions { local_options }

All options which are mentioned to be displayed on the terminal or exported to a file, maybe in the following form:

name	relativeFilePath	absoluteFilePath	Option.property. ...	Default	Set
reboost.js	.	.../project/	rootDir	'process.cwd()'	'process.cwd()'
-"-	-"-	-"-	showResponseTime	false	true
...	...	...	...	...	...
chokidar.config.js	./.config_files/	.../project/.config_files	persistent	true	true
...	...	...	...	...	...

local_options would include properties such as:

columnsDisplayed: string[], exportTo: terminal|'path_to_log_file', sortBy: string

Documentation of foreign package configuration options

When you use foreign packages and want to mention their configuration options, you could also use an extra table to make clearer what options are actually available to the user. A reader/user instantly gets a very good and complete idea. An example/template is given right below:

<package> options

Last updated: xx xxx xx

Option	default	Reboost (1)	User (2)	Remark (3)
...	...	...	YES	About option...; See link (to documentation); etc
		INACTIVATED	Avoid	Causes side effect(s); Under investigation; Not yet investigated; Unknown behaviour; etc
		REMOVED	Never	Breaks Reboost functionality; Fatal error; etc
			May	It's uninteresting; etc

(1) The value (same as default or altered) that Reboost has chosen. Reboost may also decide for some reason to inactivate or remove an option. Columns Reboost and User are not related to each other in the above example.

(2) If user is allowed to alter the value set by Reboost.

(3) Columns User and Remark are fully related to each other in the above example.

"watchOptions.exportList" or "log.exportWatchList"

A tool to help to check which files are under watch and which not.

"plugin-babel - transformContent" mismatch type declaration

In reboost/packages/plugin-babel/src/index.ts, transformContent function gives an error. See photo below.

Note : In fact, I am trying to write a new plugin for which I follow the pattern of the above-mentioned plugin.

Error with lit-element

"reboost": "^0.8.0"
"lit-element": "^2.3.1"

esbuild: Warning "node_modules/lit-element/lit-element.js"

(200:21) Unsupported source map comment
| //# sourceMappingURL=lit-element.js.map
esbuild: Warning "node_modules/lit-element/lib/decorators.js"

(342:21) Unsupported source map comment
| //# sourceMappingURL=decorators.js.map
esbuild: Warning "node_modules/lit-element/lib/updating-element.js"

(670:21) Unsupported source map comment
| //# sourceMappingURL=updating-element.js.map
Error while parsing ".../reboost-le/node_modules/lit-element/lib/decorators.js"
You may need proper loader to handle this kind of files.

  207 |     name) => {
  208 |         const descriptor = {
> 209 |             async get() {
      |                  ^ Unexpected token
  210 |                 await this.updateComplete;
  211 |                 return this.renderRoot.querySelector(selector);
  212 |             },
esbuild: Warning "node_modules/lit-html/lit-html.js"

(60:21) Unsupported source map comment
| //# sourceMappingURL=lit-html.js.map
esbuild: Warning "node_modules/lit-element/lib/css-tag.js"

(73:21) Unsupported source map comment
| //# sourceMappingURL=css-tag.js.map
esbuild: Warning "node_modules/lit-html/lib/shady-render.js"

(287:21) Unsupported source map comment
| //# sourceMappingURL=shady-render.js.map
esbuild: Warning "node_modules/lit-html/lib/dom.js"

(44:21) Unsupported source map comment
| //# sourceMappingURL=dom.js.map
esbuild: Warning "node_modules/lit-html/lib/modify-template.js"

(128:21) Unsupported source map comment
| //# sourceMappingURL=modify-template.js.map
esbuild: Warning "node_modules/lit-html/lib/render.js"

(46:21) Unsupported source map comment
| //# sourceMappingURL=render.js.map
esbuild: Warning "node_modules/lit-html/lib/template-factory.js"

(48:21) Unsupported source map comment
| //# sourceMappingURL=template-factory.js.map
esbuild: Warning "node_modules/lit-html/lib/template-instance.js"

(137:21) Unsupported source map comment
| //# sourceMappingURL=template-instance.js.map
esbuild: Warning "node_modules/lit-html/lib/template.js"

(215:21) Unsupported source map comment
| //# sourceMappingURL=template.js.map
esbuild: Warning "node_modules/lit-html/lib/default-template-processor.js"

(52:21) Unsupported source map comment
| //# sourceMappingURL=default-template-processor.js.map
esbuild: Warning "node_modules/lit-html/lib/template-result.js"

(113:21) Unsupported source map comment
| //# sourceMappingURL=template-result.js.map
esbuild: Warning "node_modules/lit-html/lib/directive.js"

(63:21) Unsupported source map comment
| //# sourceMappingURL=directive.js.map
esbuild: Warning "node_modules/lit-html/lib/part.js"

(23:21) Unsupported source map comment
| //# sourceMappingURL=part.js.map
esbuild: Warning "node_modules/lit-html/lib/parts.js"

(456:21) Unsupported source map comment
| //# sourceMappingURL=parts.js.map
esbuild: Warning "node_modules/lit-element/lib/decorators.js"

(342:21) Unsupported source map comment
| //# sourceMappingURL=decorators.js.map
Error while parsing ".../reboost-le/node_modules/lit-element/lib/decorators.js"
You may need proper loader to handle this kind of files.

  207 |     name) => {
  208 |         const descriptor = {
> 209 |             async get() {
      |                  ^ Unexpected token
  210 |                 await this.updateComplete;
  211 |                 return this.renderRoot.querySelector(selector);
  212 |             },

resolve.aliasFields : string[] (enhanced-resolve) mismatch type declaration

resolve.aliasFields: ['browser'] gives an error. See photo below.