How to import class from `js` file inside `html` file?

Question

I have the following problem: I want to create an instance of a class inside HTML file. Here is my structure:

.js file with the class to be included

and inside HTML body I want to do:

<!DOCTYPE html>
<html>

<head>
  <title>Markdown Editor</title>
  <!--include Stacks -->
  <link rel="stylesheet" href="./node_modules/@stackoverflow/stacks/dist/css/stacks.css" />
  <!-- include the bundled styles -->
  <link rel="stylesheet" href="./node_modules/@stackoverflow/stacks-editor/dist/styles.css" />

  <!--include Stacks -->
  <script src="./node_modules/@stackoverflow/stacks/dist/js/stacks.js"></script>



  <!-- PROBLEMATIC PART! -->
  <script type="module" src="./node_modules/@stackoverflow/stacks-editor/dist/stacks-editor/editor.js"></script>


</head>

<body>
  <div style="margin: 20px; width: 800px">
    <div id="editor-container"></div>
    <!-- initialize the editor -->
    <!-- BELOW FAILS! -->
    <script>
      new StacksEditor(
        document.querySelector("#editor-container"), {}
      );
    </script>
  </div>
</body>

</html>

Unfortunately, editor doesn't appear and the following error appears in the console:

Console error

What am I doing wrong?

EDIT The only remaining problem is that VITE doesnt pick my changes. I edited constructor in node_modules\@stackoverflow\stacks-editor\dist\stacks-editor\editor.js as follows (comment added)

Comment added to contructor

but in the browser the changes are not picked:

devTools

However, when I click right-click + open in new tab, my comment is there enter image description here

Alexander Nenashev · Accepted Answer

Developing without a bundler feels very stone aged nowadays. I strongly recommend using a bundler. I recommend Vite.

The OP's goal is to change and debug files inside node_modules/@stackoverflow/stacks-editor/.

I don't know why but it was interesting to setup Vite to handle that. The stacks-editor NPM package provides 2 ways of embedding: through a bundler (EMS or CommonJS) and <script>. The <script> links already bundled code. So we go with Vite to handle the project.

And we have an unsolved problem here: the NPM package is/has CommonJS dependencies and Vite doesn't support excluding CommonJS packages from its dependency pre-bundling! So we are stuck with the Vite's dev server...

The next try is to work with the build and ask Rollup to do some stuff. Basically we have watch option to watch a directory inside node_modules and that example was in the feature request of adding watch option! For some reason the option doesn't work and using npx vite build --watch doesn't rebuild the project...

My next step will be reporting the issue on the Rollup's github.

So... We have the last resort: we watch files and re-run build.
On linux for that I've installed entr and run the command:

find node_modules/@stacksoverflow/stacks-editor | entr npx vite build

Now we can change the code inside the stacks-editor code and the page is rebuilt automatically...

To debug comfortably with the build we need turn off minification & treeshaking.

The only problem you don't debug your original files but a compiled one.

So now when I write in the source:

export class StacksEditor {
    constructor(target, content, options = {}) {
        debugger;
        console.log('EDITOR CONSTRUCTOR')
        // do a deep merge of the passed options with our default options
        this.options = deepMerge(StacksEditor.defaultOptions, options);
        this.target = target;
        // naively generate a random internalId for this editor instance
        this.internalId = generateRandomId();
        this.innerTarget = document.createElement("div");
        this.target.appendChild(this.innerTarget);
        this.setupPluginContainer();
        this.pluginProvider = new ExternalPluginProvider(this.options.editorPlugins, this.options);
        this.setBackingView(this.options.defaultView, content);
    }

and load the page I get: enter image description here

vite.config.js

import { defineConfig } from 'vite';

export default defineConfig({
    build: {
        minify: false,
        rollupOptions: {
            treeshake: false
        }
    }
});

package.json

{
  "name": "stacks-editor",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^4.3.9"
  },
  "dependencies": {
    "@stackoverflow/stacks-editor": "^0.8.7"
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="editor-container"></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

main.js

import { StacksEditor } from "@stackoverflow/stacks-editor";
// don't forget to include the styles as well
import "@stackoverflow/stacks-editor/dist/styles.css";
// include the Stacks js and css as they're not included in the bundle
import "@stackoverflow/stacks";
import "@stackoverflow/stacks/dist/css/stacks.css";

new StacksEditor(
    document.querySelector("#editor-container"),
    "*Your* **markdown** here"
);

Install, build and run Vite production server:

npm install
find node_modules/@stacksoverflow/stacks-editor | entr npx vite build
npx vite preview

How to import class from `js` file inside `html` file?

Tags:

javascript

html

Mr.Price

1 Answers

Alexander Nenashev

Recent Activity

Donate For Us

How to import class from `js` file inside `html` file?

Tags:

javascript

html

Mr.Price

1 Answers

Alexander Nenashev

Related questions

Recent Activity

Donate For Us