Koutaro Chikuba mizchi

## study-unified.ts
import unified from "unified";
// @ts-ignore
import visit from "unist-util-visit";
import u from "unist-builder";

// var tree = u("root", [
//   u("subtree", { id: 1 }),
//   u("subtree", { id: 2 }, [
//     u("node", [u("leaf", "leaf 1"), u("leaf", "leaf 2")]),
//     u("leaf", { id: 3 }, "leaf 3"),

## scripts-build-library.js
const rewire = require("rewire");
const path = require("path");
const defaults = rewire("react-scripts/scripts/build.js");
const config = defaults.__get__("config");

config.optimization.runtimeChunk = false;
config.output.filename = "excalidraw.js";
config.output.libraryTarget = "umd";
config.output.library = "Excalidraw";
config.output.path = path.join(__dirname, "../dist");

## run-postcss-in-browser.ts
// @ts-ignore
import precss from "precss";
import postcss from "postcss";
import autoprefixer from "autoprefixer";

const input = `
/* autoprefixer grid: autoplace */
.container {
  width: 100%;
  height: 100%;

## ee.ts
class EventEmitter {
  _handlersMap = new Map<string, Function[]>();

  on(event: string, fn: Function) {
    if (this._handlersMap.has(event)) this._handlersMap.set(event, []);
    const funcs = this._handlersMap.get(event);
    funcs.push(fn);
  }

  emit(event: string, ...args: any) {

## 20 年代のフロントエンド.md

      
              1 file
            
          
              0 forks
            
          
              1 comment
            
          
              130 stars
            
          
                mizchi
                / 20 年代のフロントエンド.md
            
            
              Created Jan 29, 2020
            
          
      View 20 年代のフロントエンド.md
  
    
    明日の下書き

これはなに

高円寺.dev #3 用の資料 https://koenji.connpass.com/event/160886/
フロントエンド専門じゃない人向けの、フロントエンドの最先端〜やや未来の話です
このレイヤーでは Node.js を使うべき/使うと強いという部分がありますが、他言語を否定しているわけではありません。むしろ他言語でこのアーキテクチャを模倣してほしいという話です。


## try-pnp.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                mizchi
                / try-pnp.md
            
            
              Created Dec 9, 2019
            
          
      View try-pnp.md
  
    
    package.json
{
  "name": "foo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "installConfig": {
    "pnp": true
  },


## VSCODE_CODE_READING_MEMO.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              1 star
            
          
                mizchi
                / VSCODE_CODE_READING_MEMO.md
            
            
              Created Dec 8, 2019
            
          
      View VSCODE_CODE_READING_MEMO.md
  
    
    Entrypoint を探す
yarn web で起動する scripts/code-web.js を読む。
node の http-server になって、パスを動的に書き換えている。
(サーバーが本当に必要なのか？静的アセットにならないんだろうか？という目線で読む)
試しに変数をダンプしてみた。


## test-runner.ts
// @ts-ignore
import { compile } from "@mizchi/web-compiler";

async function transformInput(code: string) {
  const out = await compile({
    entry: "/index.js",
    files: {
      "/index.js": code
    },
    pkg: {

## server.js
const express = require('express');
const app = express();
app.use(express.json());

app.use((_req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );

## index.html
<!-- Copyright (C) Microsoft Corporation. All rights reserved. -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />

		<!-- Disable pinch zooming -->
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
	import unified from "unified";
	// @ts-ignore
	import visit from "unist-util-visit";
	import u from "unist-builder";

	// var tree = u("root", [
	// u("subtree", { id: 1 }),
	// u("subtree", { id: 2 }, [
	// u("node", [u("leaf", "leaf 1"), u("leaf", "leaf 2")]),
	// u("leaf", { id: 3 }, "leaf 3"),
	const rewire = require("rewire");
	const path = require("path");
	const defaults = rewire("react-scripts/scripts/build.js");
	const config = defaults.__get__("config");

	config.optimization.runtimeChunk = false;
	config.output.filename = "excalidraw.js";
	config.output.libraryTarget = "umd";
	config.output.library = "Excalidraw";
	config.output.path = path.join(__dirname, "../dist");
	// @ts-ignore
	import precss from "precss";
	import postcss from "postcss";
	import autoprefixer from "autoprefixer";

	const input = `
	/* autoprefixer grid: autoplace */
	.container {
	width: 100%;
	height: 100%;
	class EventEmitter {
	_handlersMap = new Map<string, Function[]>();

	on(event: string, fn: Function) {
	if (this._handlersMap.has(event)) this._handlersMap.set(event, []);
	const funcs = this._handlersMap.get(event);
	funcs.push(fn);
	}

	emit(event: string, ...args: any) {
	// @ts-ignore
	import { compile } from "@mizchi/web-compiler";

	async function transformInput(code: string) {
	const out = await compile({
	entry: "/index.js",
	files: {
	"/index.js": code
	},
	pkg: {
	const express = require('express');
	const app = express();
	app.use(express.json());

	app.use((_req, res, next) => {
	res.header("Access-Control-Allow-Origin", "*");
	res.header(
	"Access-Control-Allow-Headers",
	"Origin, X-Requested-With, Content-Type, Accept"
	);
	<!-- Copyright (C) Microsoft Corporation. All rights reserved. -->
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />

	<!-- Disable pinch zooming -->
	<meta
	name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"