Problem with @Decorators

Yomyer commented 3 years ago

Hello,

I have a problem when I create the index.js with the decorators and microbundle rename the name of the classes with a *_1

@Exportable()
export class Point extends Base {
}

to

var Point_1;

exports.Point = Point_1 = /*#__PURE__*/function (_Base) {
  function Point() {

tsconfig.json


 "compilerOptions": {
        "outDir": "dist",
        "lib": ["es2018", "DOM", "esnext"],
        "module": "ESNext",
        "target": "ESNext",
        "moduleResolution": "node",
        "sourceMap": true,
        "esModuleInterop": false,
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "noImplicitAny": true,
        "noImplicitOverride": false,
        "strictNullChecks": false,
        "suppressImplicitAnyIndexErrors": true,
        "noUnusedLocals": false,
        "noUnusedParameters": true,
        "allowSyntheticDefaultImports": true,
        "allowJs": true,
        "skipLibCheck": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "experimentalDecorators": true,
        "noFallthroughCasesInSwitch": true,
        "baseUrl": "./src",
        "paths": {
            "@paperts": ["./"]
        }
    },
´´´

Regards

rschristian commented 3 years ago

The name exported from the module stays the same (exports.Point), it shouldn't matter what it's referred to as internally?

Unrelated, but your settings for module and target will be ignored. Microbundle forces ESNext for both fields. See Using with TypeScript

Yomyer commented 3 years ago

Hello,

Thanks, I have switched to ESNext to see if it had any effect but it gives the same problem. The funny thing is that if I remove the decorator it returns the class with the expected Point name :(

rschristian commented 3 years ago

What's the problem? It's correctly exported as Point. Point_1 is internal to the module. It shouldn't matter for consumers at all.

Yomyer commented 3 years ago

The problem is that when I load the library in a simple HTML example it does not find the new Point() but the new Point_1().

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Example</title>
        <script>
            var exports = {}
        </script>
        <script type="text/javascript" src="../../dist/index.js"></script>
        <script>
             var topLeft = new Point_1(200, 200);  // OK
             var topLeft = new Point(200, 200); // Uncaught ReferenceError: Point is not defined
        </script>

    </head>
    <body>
    </body>
</html>

rschristian commented 3 years ago

Usage in a browser is a different issue entirely. TLDR: The solution you're probably looking for is:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Example</title>
        <script type="module">
            import { Point } from '../../dist/index.esm.js';
            let topLeft = new Point(200, 200);
        </script>
    </head>
    <body>
    </body>
</html>

The problem is you're trying to use the CJS output, which isn't really made for browser usage. What ends up happening is that you don't consume that module.exports (which is the right name) at all, but use the hoisted var instead.

Now, ESM (<script type="module">) has been supported for years and is generally the direction of the ecosystem, however, if you really need to support old browsers, you could use the UMD output from Microbundle instead:

<script type="text/javascript" src="../../dist/index.umd.js"></script>
<script>
    var topLeft = new window['foobar'].Point(200, 200);
</script>

UMD attaches your module to the window object, allowing you to use it like so. Just swap out foobar with the actual name of your module.

Yomyer commented 3 years ago

Thanks, I was finally able to solve the problem with the UMD and using new windows.namePagage.Point()

Thanks for your help.

rschristian commented 3 years ago

Glad to hear it!

developit / microbundle

Problem with @Decorators #872