juanpicado

HMR for verdaccio plugin development

Verdaccio doesn't automatically reload plugins when files change, making plugin development a bit painful. So here is my approach for a hot module reload in verdaccio, so that verdaccio restarts whenever your plugin changes.

1. Create a project folder and a subfolder plugins. Bootstrap the plugin in that folder using the generator so that you end up with something like plugin/verdaccio-my-plugi/ folder structure.

2. First, let's add a watch mode for your plugin (if you don't have it yet) by adding the following script to you package.json: In plugin/verdaccio-my-plugin/package.json

  "scripts": {

juanpicado

import { spawn } from "child_process";

const child = spawn("node", [
  require.resolve("verdaccio/bin/verdaccio"),
  "-c",
  "./verdaccio.yaml",
]);

child.stdout.on("data", (data) => {
  process.stdout.write(data.toString());

juanpicado

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

juanpicado

title	subtitle	author	date	source
npm vs Yarn Command Translation Cheat Sheet	CLI commands comparison	yarn	February 15, 2020	https://yarnpkg.com/en/docs/migrating-from-npm

npm vs Yarn Command Translation Cheat Sheet

juanpicado

const fs = require('fs');
const path = require('path');
const verdaccio = require('verdaccio').default;
const YAML = require('js-yaml');

const getConfig = () => {
	return YAML.safeLoad(fs.readFileSync(path.join(__dirname, 'config.yaml'), 'utf8'));
}

const cache = path.join(__dirname, 'cache');

juanpicado

storage: ./storage
plugins: ./plugins
web:
  title: Verdaccio
auth:
  htpasswd:
    file: ./htpasswd
uplinks:
  npmjs:
    url: https://registry.npmjs.org/

juanpicado

Debugging webpack

"scripts" : {
  "debug:webpack": "node --inspect --inspect-brk ./node_modules/webpack/bin/webpack.js",
  "prod:debug": "npm run debug:webpack -- --mode production",
  "dev:debug": "npm run debug:webpack -- --mode development"
}

juanpicado

# ~/Library/LaunchAgents/org.verdaccio.launcher.plist
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>Label</key>
	<string>org.verdaccio.launcher</string>
	<key>Program</key>
	<string>/Users/user/Scripts/verdaccio.sh</string>
	<key>RunAtLoad</key>

juanpicado

'use strict';

// The purpose of this example is to show
// how you can block the event loop with JavaScript.
// There is 3 routes
// / respond with Hello, World text
// /block uses JavaScript while for 5 seconds
// /non-block uses setTimeout for 5 seconds

// Do the following

juanpicado

$> npm install wd
// execute the test
$> node wd.foo.test.js