Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

What is the proper way of importing modules in typescript (ECMAScript 2015)? #199

Open
UndeadKernel opened this issue Nov 30, 2022 · 6 comments
Labels

Comments

@UndeadKernel
Copy link

UndeadKernel commented Nov 30, 2022

When using ECMAScript 2015, import statements are lexically bound. That is, everything inside a module must be either declared or imported by a module. There is no such thing as globals outside of the module.

The modules of jsPanel assume that the jsPanel object exists in the global scope. Due to this, the following lines of code result in an error:

import jsPanel from "dist/jspanel.js"
import "dist/extensions/modal/jspanel.modal.js"

The last import triggers an error because jsPanel is not defined.

What is the appropriate way of using modules in this context?
For reference, I'm building a web application with vue3 and typescript.

@Flyer53
Copy link
Owner

Flyer53 commented Dec 1, 2022

In your code example above you use the files from the dist folder. They don't export anything and thus don't work as modules. In order to use jsPanel as js module you have to use the files from the es6module folder. And don't forget to use type="module" in the script tag.

<script type="module">
    import { jsPanel } from './es6module/jspanel.js';
    import './es6module/extensions/modal/jspanel.modal.js';
    .
    .
    .

Please try that first and let me know whether it works.

PS: I don't use vue and/or typescript at all. So I won't be able to help you with any questions about vue or typescript.

@Flyer53
Copy link
Owner

Flyer53 commented Jan 6, 2023

Did you try anything concerning this issue? It's been more than a month now ...

@UndeadKernel
Copy link
Author

Sorry for the delay @Flyer53. I'm still trying to make JsPanel work with the modules syntax. I'll report back when I find what is causing me problems. I suspect it's something related to Vue or Typescript.

By the way, I've been using a typescript data type for JsPanel. Would you be interested in a type declaration for JsPanel so that it can be used with Typescript?

@Flyer53
Copy link
Owner

Flyer53 commented Jan 16, 2023

@UndeadKernel
No problem at all, sorry that I can't help you with Vue or Typescript issues.

Although I won't start using Typescript I could add your type declaration to the repo in case it's usable for everybody else. I would name you as originator of the type declaration for any further questions on this topic.

@UndeadKernel
Copy link
Author

I was able to get everything running with the explanation you gave me. Thanks.
Most of the issues were related to the creation of a Typescript module for JPanel. I have done that and I intend to create a pull request with the type definition. Where should I put it in your repo?

@Flyer53
Copy link
Owner

Flyer53 commented Feb 21, 2023

Thanks a lot for your work.
Well, if your Typescript definition is usable for both the module version and the regular version, then I would put the definition file in the root directory. If you can use it only for the module version put it in the es6module folder.

Info: I'm out of town for the next two or three weeks. So it will take some time before I can look at it...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants