Self recommendation of transformer related libraries

[Jack-Works]

Hi! This library is cool, thanks for your work! When I view the source code, I found I can provide some better alternatives to some TS transformers.

React Refresh TS transformer: react-refresh-typescript (PR to React)

react-refresh-typescript is provided in both ESM and CommonJS format. This package doesn't depend on any Node-JS specific functionalities. It's fully passed the test suit as the babel version does.

Import path rewrite: @magic-works/ttypescript-browser-like-import-transformer is a fully functional import path rewrite library for converting any imports to Web-ready imports. This library also considers the non-Node environment in mind when design. All IO (including import statements) are delegated to a node adaptor so if you need it, I can write a deno adaptor and it's available for deno.

Thanks!

[ije]

this is fabulous!!! the react-refresh transform in Aleph.js is not stable currently, your library definitely is the thing i was looking for!

import reactReFreshTypescrpt from "https://esm.sh/react-refresh-typescript"

this should work, i will test it later, great work thanks a lot!

[ije]

@Jack-Works currently i'm focusing on Aleph.js's new compiler with swc in Rust to get better prefs since tsc is slow, also needs a stable fast refresh plugin for the new compiler, would you be interested in the plugin in swc(Rust)?

FYI please check the swc branch

[Jack-Works]

I know swc but never write a plugin for it. I may have a try 👀

[ije]

@Jack-Works i just tested, something unexpected was going to happen.

compile.ts

import reactRefreshTS from 'https://esm.sh/react-refresh-typescript@1.0.4'

transformers.before!.push(reactRefreshTS({}))

logo.tsx

import React, { useState } from 'https://esm.sh/react'

export default function Logo({ width = 75 }: { width?: number }) {
   const [height, setHeight] =  useState(width)


    return (
        <img src="/logo.svg" width={width} height={height} title="Aleph.js" />
    )
}

i got an unfinished result:

var _a;
import React, { useState } from "../-/esm.sh/react.js";
export default function Logo({ width = 75 }) {
    const [height, setHeight] = useState(width);
    return (React.createElement("img", { src: "/logo.svg", width: width, height: height, title: "Aleph.js", __source: { fileName: "/components/logo.tsx", lineNumber: 7 } }));
}
_a = Logo;
$RefreshReg$(_a, "Logo");

should be:

const _s = $RefreshSig$();
import React, { useState } from "../-/esm.sh/react.js";
export default function Logo({ width = 75 }) {
    _s();
    const [height, setHeight] = useState(width);
    return (React.createElement("img", { src: "/logo.svg", width: width, height: height, title: "Aleph.js", __source: { fileName: "/components/logo.tsx", lineNumber: 6 } }));
}
_s(Logo, "useState{[height, setHeight](width)}");
$RefreshReg$(Logo, "Logo");

anything i missed?

[Jack-Works]

Hooks signature are missing, strange, I'll investigate it later

[ije]

cool, thanks

[Jack-Works]

Sorry I cannot reproduce that. My result for your example code is:

var _a;
var _b;
_b = $RefreshSig$();
import React, { useState } from 'https://esm.sh/react';
export default function Logo({ width = 75 }) {
    _b();
    const [height, setHeight] = useState(width);
    return (React.createElement("img", { src: "/logo.svg", width: width, height: height, title: "Aleph.js" }));
}
_a = Logo;
$RefreshReg$(_a, "Logo");
_b(Logo, "B1bTgemxQeKxhnx7iLvvyxMpH2Y=");

const ts = require("typescript");
const result = ts.transpileModule(
    `import React, { useState } from 'https://esm.sh/react'

    export default function Logo({ width = 75 }: { width?: number }) {
       const [height, setHeight] =  useState(width)
    
    
        return (
            <img src="/logo.svg" width={width} height={height} title="Aleph.js" />
        )
    }
    `,
    {
        transformers: { before: [require("react-refresh-typescript").default()] },
        compilerOptions: { jsx: ts.JsxEmit.React, module: ts.ModuleKind.ESNext, target: ts.ScriptTarget.ES2015 },
    }
).outputText;
console.log(result);

[ije]

@Jack-Works i changed the transformers order(seems react-refresh-typescript should be the first one), it works now!

var _a;
var _b;
_b = $RefreshSig$();
import React, { useState } from 'https://esm.sh/react';
export default function Logo({ width = 75 }) {
    _b();
    const [height, setHeight] = useState(width);
    return (React.createElement("img", { src: "/logo.svg", width: width, height: height, title: "Aleph.js" }));
}
_a = Logo;
$RefreshReg$(_a, "Logo");
_b(Logo, "B1bTgemxQeKxhnx7iLvvyxMpH2Y=");

what a feat! thanks!