We Keep Coding

How do I successfully build monaco-editor in esbuild?

I have tried the same configuration on different platforms and they all work, while in esbuild it leads to an error
esbuild:
esbuild.build({
entryPoints: ['node_modules/monaco-editor/esm/vs/editor/editor.worker.js'],
outfile: outfile,
bundle: true,
format: 'iife'
}).then(() => {
console.log('Build complete, save at ' + outfile)
})
I then referenced it in the project as follows
self.MonacoEnvironment = {
getWorker() {
return new Worker('/assets/editor.worker.js')
},
}
import(
'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution'
).then(() => {
import('monaco-editor').then(({ editor }) => {
editor.create(container.current, {
language: 'typescript',
})
})
})
Eventually the console reports a runtime error and I find that the worker file has been referenced correctly and the error seems to be due to walking this code
if (!initialized) {
initialize(null);
}

I just need to change the directory of the imported editors to api
import('monaco-editor/esm/vs/editor/editor.api').then(({ editor }) => {
editor.create(container.current, {
language: 'typescript',
})
})

Replace all image paths in a css file with base64 encoded strings - rollup

I am trying to replace all the image paths in a css background url to a base64 encoded string while doing a rollup build.
I am using rollup-plugin-postcss for this, I am able to generate a separate .css file in the build, but I want the image paths to be replaced with base64 encoded data URL.
Something like this:
background: url('images/sample.png');
to
background: url('data:image/png;base64,R0lGODlhyAAiALM...DfD0QAADs=');
Here is what I have been doing:
import postcss from 'rollup-plugin-postcss'
...
plugins: [
postcss({
extensions: ['.css'],
extract: path.resolve('dist/index.css'),
}),
]

A possible solution would be to use postcss-url:
import postcssurl from 'postcss-url';
postcss({
..., // postcss options
plugins: [
postcssurl({
url: 'inline',
}),
],
}),

I am not not sure if it is possible with rollup-plugin-postcss, Try using “image-to-base64” npm it’s very simple,
Download command :
npm i -S image-to-base64
Example :
const imageToBase64 = require('image-to-base64');
//or
//import imageToBase64 from 'image-to-base64/browser';
imageToBase64("path/to/file.jpg") // Path to the image
.then(
(response) => {
console.log(response); // "cGF0aC90by9maWxlLmpwZw=="
}
)
.catch(
(error) => {
console.log(error); // Logs an error if there was one
}
)
There is more examples here
https://www.npmjs.com/package/image-to-base64
If you need more help you can reply to this comment.

You can use postcss-inline-base64
Here is a working example based on this rollup starter:
import resolve from '#rollup/plugin-node-resolve';
import commonjs from '#rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';
import path from 'path'
import postcss from 'rollup-plugin-postcss'
import base64Inliner from 'postcss-inline-base64'
// `npm run build` -> `production` is true
// `npm run dev` -> `production` is false
const production = !process.env.ROLLUP_WATCH;
const __dirname = path.resolve();
const baseDir = path.join(__dirname, 'public')
export default {
input: 'src/main.js',
output: {
file: 'public/bundle.js',
format: 'iife', // immediately-invoked function expression — suitable for <script> tags
sourcemap: true
},
plugins: [
postcss({
extensions: ['.css'],
extract: path.resolve('public/styles.css'),
plugins: [base64Inliner({ baseDir })]
}),
...
]
};
I then created a css file in the src folder:
body {
background: url('b64---./images/test.png---');
}
In index.js:
import "./styles.css";
In index.html
....
<title>rollup-starter-app</title>
<link href="styles.css" rel="stylesheet" />
....
I was able to get:

Cannot find name 'FontFace'. TS2304

I am trying to load fonts dynamically for my project. I dont understand why I'm getting this error.
"Cannot find name 'FontFace'. TS2304"
Following is the code for your reference:
const loadFont = (name: string, source: string) => {
const font = new FontFace(name, `url(${source})`);
font
.load()
.then(function (loadedFont: any) {
document.fonts.add(loadedFont);
document.body.style.fontFamily = name;
})
.catch(function (error) {
console.log(error);
});
};

If you are using Typescript, make sure you have installed type definitions for CSS Font loading modules
npm install --save #types/css-font-loading-module
Ref: https://www.npmjs.com/package/#types/css-font-loading-module

after installing also you should add type to tsconfig.json, otherwise it will not work.
{
"compilerOptions": {
/* other compiler options... */
"types": ["css-font-loading-module"]
}
}

.env Nuxt JS doesn't resolve routes in generate option correctly

I'm trying to use Nuxt JS's 2.9.2 generate object to generate dynamic pages as static files using my .env file to pull a URL, I'm having difficuility in getting it to properly link up:
nuxt.config.js
require('dotenv').config();
import pkg from './package'
import axios from 'axios'
export default {
mode: 'universal',
env: {
blog_api: process.env.BLOG_API || "http://localhost:3000/articles/blogs.json"
},
/*
** Build directory
*/
generate: {
dir: 'dist-next',
routes: function () {
return axios.get(`${process.env.blog_api}`)
.then((res) => {
return res.data.blogs.map((blog) => {
return '/posts/view/' + blog.title
})
})
}
}
}
The above code, more specifically ${process.env.blog_api}, can't seem to resolve the routes, despite it working perfectly if I replace it with my own local domain.
.env
BLOG_API="http://my-local-domain.clone/articles/blogs.json"
EDIT:
Updated code with my config, http://my-local-domain.clone/articles/blogs.json is inside of static/articles

You should use dotenv module:
https://www.npmjs.com/package/dotenv
More Info about configuration with NUXT you have here:
https://samuelcoe.com/blog/nuxt-dotenv/
You probably want to set your env property in nuxt.config.js, for example:
module.exports = {
env: {
BLOG_API: process.env.BLOG_API_URL,
},
In your component, you can now use them :
makeAsyncCall({
to: process.env.BLOG_API,
})

nodejs re-import file when it changes

My main code is under chokidar watched folder, when a file changes it emit an event
The main script is this
const fileName = "test.ts";
import(fileName).then((t: any) => {
t.default();
});
and this is the file test.ts
export default () => {
console.log("aaa");
};
I need to reimport file when I change test.ts, for example, I need this
START script
OUTPUT "aaa"
CHANGE test.ts from "console.log("aaa")" to "console.log("bbb")"
OUTPUT "bbb"

The solution is to use decache, full code is this (with chokidar folder watcher)
const folder = chokidar.watch("./myFolder", {
ignored: /(^|[\/\\])\../,
persistent: true,
});
folder
.on("add", (fileName: string) => {
const mod = require(fileName)
mod.default();
.on("change", (fileName: string) => {
decache(fileName);
const mod = require(fileName)
mod.default();
})