Module Harmony Yosuke Furukawa 2024-05-31 @ CTO ڠձ LT ۝ஈԼ

એ఻

WebϑϩϯτΤϯυ൛ DX Criteria ࡞Γ·ͨ͠ Ξηεϝϯτγʔτग़ͨͷͰੋඇ΍ͬͯΈͯԼ͍͞

X: @yosuke_furukawa GitHub: yosuke-furukawa

Module Harmony ͱ͍͏ఏҊ͕ߦΘΕ͍ͯΔ

JavaScript (ECMAScript) ͸߹੍ٞ Proposal ͱ͍͏ఏҊΛग़ͯ͠࿩͠߹ͬͯ ࣮૷ͯ͠ΈͯҙݟΛग़͠߹͍ͳ͕Β৽͍͠࢓༷͕ܾ·Δ

ͦΜͳதɺ Module ͸ ༷ʑͳఏҊ͕ߦΘΕͯ͠·͍ͬͯΔ

৽͍͠ఏҊͱ͍͏Θ͚Ͱ͸ͳ͍ɻ ͲͪΒ͔ͱ͍͏ͱ "੔ཧ" ͱ͍͏ͷʹ͍ۙɻ

Module Harmony ͷ໨త • ϓϩϙʔβϧΛԣஅͨٞ͠࿦ • ൚༻తͳϞδϡʔϧۭؒʹؔ͢Δٞ࿦ • ԣஅͨ͠ݒ೦΋͘͠͸ݸผͷϓϩϙʔβϧʹؔ͢Δٙ໰ͷ໌֬Խ • ͭ·Γɺ৭ʑ͋ΔϓϩϙʔβϧΛΫϦΞʹͯ͠ɺٞ࿦͠·͠ΐ͏ͱ ͍͏࿩

͡Ό͋ࠓͲΜ͚ͩͷ Proposal ͕ Module ʹ͋Δͷ͔ʁ

͜Μ͚ͩ͋Δ • Import attributes • Module Expressions • Module Declarations • Module local imports • Module Source imports • Module Instance imports • Deferred import evaluation • Module loader hooks • Module source static analysis • Virtual Module sources

͜Μͳʹ͋ͬͨΒ༁Θ͔ΒΜ͘ͳΒͳ͍ʁ

Θ͚Θ͔ΒΜ͘ͳͬͯΔ Module Source Module Instance Module loader hooks Source import instance import Module Expressions Module Declarations imports from local bindings Module Source Static Analysis Virtual module sources Deferred import Import attributes ґଘؔ܎໼ҹͷઌ͕ґଘઌ

Θ͚Θ͔ΒΜ͘ͳͬͯΔ Module Source Module Instance Module loader hooks Source import instance import Module Expressions Module Declarations imports from local bindings Module Source Static Analysis Virtual module sources Deferred import Import attributes ґଘؔ܎໼ҹͷઌ͕ґଘઌ ґଘͳ͠ɺಠཱͯ͠ਐΊΒΕΔ ඃґଘڧ͠ɻ ૣ͘ίϯηϓτΛܾΊͳ͍ͱ ଞͷ΍ͭਐΊΒΕͳ͍ɻ

Θ͚Θ͔ΒΜ͘ͳͬͯΔ Module Source Module Instance Module loader hooks Source import instance import Module Expressions Module Declarations imports from local bindings Module Source Static Analysis Virtual module sources Deferred import Import attributes ґଘؔ܎໼ҹͷઌ͕ґଘઌ ࢓༷ͱܾͯ͠·Δ·Ͱԕͦ͏ɻ ૬ޓґଘͯ͠Δɾɾɾ

͔ͩΒɺ "੔ཧ" ͠Α͏Ͷ͍ͬͯ͏࿩

ࠓճ͸ͦΕͧΕΛ঺հͯ͠ɺ ʮ΁ʔʯͬͯͳͬͨΒऴྃ

ͱΓ͋͑ͣɺҰ൪ґଘ͕ͳ͍ͱ͜Ζ͔Β

import attributes • ੲ import assertions ͬͯݴΘΕͯͨ΍ͭ • import ͢ΔࡍʹͲΜͳܗࣜͷ΋ͷΛimport͢Δͷ͔એݴͰ͖Δ • JSONΛimport͢Δ࣌ʹ࢖͏ͷ͕ݱࡏͷओͳϢʔεέʔε • ͦͷ͏ͪଞͷ΋ͷ΋ࢦఆͰ͖ΔΑ͏ʹ͢Δ͔΋ɻ import foo from "./bar.json" with { type: "json" }; import ("./baz.json", { with: { type: "json" } })

Deferred import evaluation • import ࣌ʹ஗ԆධՁͰ͖Δ syntax Λ௥Ճ͢Δ࢓༷ • await import() Ͱ΋஗Ԇ͸Ͱ͖Δ͕ɺasync function͕ڧ੍͞Εͯ͠ ·͏ɻ import defer * as ns from "./mod.mjs"; function later() { ns.anExport; // ࣮ߦ࣌ʹ mod.mjs ΛධՁ͢Δ }

ܹ͘͠ґଘ͞ΕͯΔ΍ͭ

Import Phase ͷ͓͞Β͍

Import Phase ͷ͓͞Β͍ ͦΕͧΕ͝ͱʹम০ࢠΛ༻ҙ͍ͯ͠Δ

Module Source ͱ͍͏֓೦ • ϑΝΠϧΛιʔε͔Βimportͨ͠ΒίϯύΠϧ΋͢Δɻ • WebAssembly.instatiateStreamingΛ࢖ΘͣʹϩʔυͰ͖Δ import source x from ""; // wasm ͰϞδϡʔϧΛϩʔυ͢Δͱ͔͕۩ମྫ import source foo from "./foo.wasm";

Module Source Phase Import • JS Ͱ΋ source Λ࢖ͬͯ import ͢Δɻ import source foo from "./foo.mjs"; // ͜ͷ࣌఺Ͱ͸ foo ͸ϑΝΠϧͱಉ͡Α͏ͳ֓೦ // worker ͱͯ͠ಡΈࠐ·ͤΔͱ͔Ͱ͖ΔΑ͏ʹ͍ͨ͠ɻ const fooWorker = new Worker(fooModule, { type: "module" });

Module Instance ͱ͍͏֓೦ • Module ͷΠϯελϯεΛϩʔυͯ͘͠Δ • ͦ΋ͦ΋ module Λ୯ମͰࣜͱͯ͠ධՁ͠ɺఆٛ͠ɺinstanceΛimportͰ͖ΔΑ͏ʹ͢Δɻͱ ͍͏௕͍ಓͷΓɻ •

Module Declaration • module Λ import / export ͠ͳͯ͘΋ϑΝΠϧ಺෦ͰఆٛͰ͖ΔΑ ͏ʹͨ͠΋ͷɻ • bundlerͱ͔Ͱͦͷ··moduleΛ࣋ͬͯ͜ΕΔΑ͏ʹɻ module Foo { let i = 0; export function foo() { console.log("foo"); return i++; } }

Module Expression • declareͨ͠moduleΛࣜͱͯ͠ධՁͰ͖Δɻ const fooModule = module { self.addEventListener("message", (e) => {}); }; const fooWorker = new Worker(fooModule, { type: "module" });

Module Expression • import จ΋ॻ͚Δɻ let mod = module { import { count } from "./db.js"; export let x = 2 * count(); };

Module Instance Imports • ͦ͏΍ͬͯఆٛͨ͠ Module ͷ Instance ͚ͩ Import ͢ΔͨΊͷ import จ import module foo from "./foo.js";

Module Instance Imports (local bindings) • ࣗ෼ͷϑΝΠϧ಺Ͱఆٛͨ͠΋ͷ͸ local Ͱ import Ͱ͖ΔΑ͏ʹ͢ Δɻ module foo {}; module bar { import foo from foo; // ͜ͷ࣌ʹࣝผࢠ͸จࣈྻ͡Όͳͯ͘΋͍ ͍ɺม਺ͷΑ͏ʹbinding͞Εͨ΋ͷ͕࢖͑Δ

Module loader hooks • source level ͰಡΜͩ module Λϩʔυ͢Δ࣌ʹݕ஌ͯ͠ͻͱखؒ Ճ͑ͯ͘ΕΔ΍ͭɻ • Moduleͱͯ͠ context ΛՃ͑ΔࡍʹͳΜ͔৽͍ؔ͠਺௥Ճͨ͠Γͱ ϝλϓϩάϥϛϯάͰ࢖͏ import source foo from "foo.js"; new Module(source, { importHook(speci f ier) { // ... }, });

࣮૷·Ͱԕͦ͏ͳ΍ͭ

Module Static Analysis • Module ͷ source Λղੳͨ͠ஈ֊Ͱ import / export ͷґଘάϥϑ Λ࡞ΔͨΊͷ৘ใΛఏڙ͢ΔϓϩύςΟ { import : "a", from: "a.js"} { import : "b", as: "c" from: "b.js"} ...

Virtual Module Source • Ծ૝ͷ Module Source Λ࡞ΕΔ࢓༷ • new Module Ͱ৽͍͠ModuleΛ࡞ΔࡍʹݩͱͳΔίʔυ͕ͳͯ͘΋object ͔ΒԾ૝ϞδϡʔϧΛ࡞ΕΔ class FooModuleSource { bindings = { // ͜͜ʹ static analysis ͞ΕΔbindingsͷ৘ใ͕དྷΔ }; constructor(text) { this.#object = JSON.parse(text); }; execute(imports) { imports.default = clone(this.#object); }; } const source = new FooModuleSource(); const module = new Module(source);

ͳͲɺ৭ʑ͋Δɻɹ

Module Harmonyʹ͍ͭͯ • ͨ͘͞Μग़ͯ͠·ͬͨ module ͷ࢓༷ΛҰ୴੔ཧ͠Α͏ͥͱ͍͏ࢼ Έ • ࣮͸ੲ΋ಉ͡Α͏ͳ͜ͱ͕͋ͬͨɻ • ͦΕ͕ ES4 ͷ൵ܶͱ harmony ͱ͍͏ࢪࡦ

Module Harmonyʹ͍ͭͯ • ࢓༷ΛܾΊΔதͰ΋৭ʑ͋Δɻ • OSS͸৭ʑΩϥΩϥ͍ͯ͠Δ͔ΒɺಌΕΔͷ΋Θ͔Δ͕ɺ࣮͸த͸ ͜͏͍͏࣮ࣾձͰ΋͋Γͦ͏ͳ࿩͹͔Γɻ • ͔ͩΒͦ͜ɺීஈ͔Β৺͕͚Δඞཁ͕͋Δɻ • ҰൠͷΞϓϦέʔγϣϯͷ։ൃ׆ಈͰ΋ harmony Λॏࢹ͍͖ͯ͠ ͍ͨɻ

ࢀߟจݙ • https://docs.google.com/presentation/d/ 1mZrAHHimtM_z_8fM9L3DUXFz5bjlJPxx8VrwsC68hmk/ edit#slide=id.g1918a5fc7ef_1_97 • https://github.com/tc39/proposal-compartments/blob/master/2- virtual-module-source.md • https://github.com/tc39/proposal-module-declarations/ • https://zenn.dev/pixiv/articles/c7071eb29927fe