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

Support for static imports in custom vue components #4162

Open
simontaurus opened this issue Jan 1, 2025 · 0 comments
Open

Support for static imports in custom vue components #4162

simontaurus opened this issue Jan 1, 2025 · 0 comments

Comments

@simontaurus
Copy link

Description

Following the examples and built-in components like plotly I've created a custom component based on an external lib (https://github.com/json-editor/json-editor):

class JsonEditor(Element,
                   component='jsoneditor.vue',
                   dependencies=[
                       'node_modules/@json-editor/json-editor/dist/jsoneditor.js'
                    ]):
  pass

A dynamic import inside jsoneditor.vue works correctly

<script>
export default { 
  async mounted() {
    await import("jsoneditor");
    var editor = new JSONEditor(this.$el);
  }
}
</script>

generating the following index.js

var jsoneditor = app.component('nicegui-jsoneditor', {template:'#tpl-jsoneditor',

  async mounted() {
    var editor = new JSONEditor(this.$el);
});

A static import

<script>
import {JSONEditor} from "@json-editor/json-editor"

export default { 
  async mounted() {
    var editor = new JSONEditor(this.$el);
  }
}
</script>

generates invalid javascript with a syntax error:

var jsoneditor = app.component('nicegui-jsoneditor', {template:'#tpl-jsoneditor',JSONEditor} from "@json-editor/json-editor";

export default {
  async mounted() {
    var editor = new JSONEditor(this.$el);
  }
});

A plain static import is simply removed leading to JSONEditor is not defined

<script>
import "@json-editor/json-editor";

export default { 
  async mounted() {
    var editor = new JSONEditor(this.$el);
  }
}
</script>
var jsoneditor = app.component('nicegui-jsoneditor', {template:'#tpl-jsoneditor',
  async mounted() {
    var editor = new JSONEditor(this.$el);
  }
});

Can I assume that static imports are currently not supported?

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

No branches or pull requests

1 participant