import components library instead of importing each component one by one

adeel41 commented 6 years ago

It would be nice if I can just import just one library which has all of components instead of importing each component one by one.

The problem with importing each one individually is then I've to import

import 'package:vue2/vue.dart';
import 'package:vue2/plugins/vue_router.dart';

and some other libraries as well and also include these components in the main.dart which is cumbersome.

I am pretty sure it is not supported because when I updated my components to become part of a library then I got this error

Error compiling dartdevc module:web|web/web__shared_0.js
[error] The name 'vuedart_INTERNAL_init' is already defined.

by the way it worked when I updated only one component to be part of a library and imported that library in main.dart but when I added the next component then build started failing with that error.

What is your opinion on to support importing libraries as well?

refi64 commented 6 years ago

Hmm...could you post all your code? If this is what I think is (issues due to the way I'm abusing the initialize library), I'm planning on massively reworking that for VueDart 0.4 (which will come SOON(tm)), but I just want to make sure this is the same thing.

adeel41 commented 6 years ago

I'll start with code that works and carry on to code which doesn't work but if you are only interested in code which doesn't work then download the zip file LibraryImportDoNotWork.zip

this code works

pubspec.yaml

name: LibraryImportDoNotWork
description: An absolute bare-bones web app.
version: 0.0.1

environment:
  sdk: '>=1.20.1 <2.0.0'

dependencies:
  vue2: any

dev_dependencies:
  intl: any
  browser: ^0.10.0
  dart_to_js_script_rewriter: ^1.0.1

transformers:
  - vue2:
      entry_points:
        - web/main.dart
  - $dart2js
  - dart_to_js_script_rewriter

web:
  compiler:
    debug: dartdevc

index.html

<!DOCTYPE html>

<head>
    <script src="https://unpkg.com/vue"></script>
    <script defer src="main.dart" type="application/dart"></script>
    <script defer src="packages/browser/dart.js"></script>
</head>

<body vuedart>
<div id="app">
    <component-a></component-a>
    <component-b></component-b>
</div>
</body>

main.dart

import 'components/component_a.dart';
import 'components/component_b.dart';
import 'package:vue2/vue.dart';
import 'dart:async';

@VueApp(el: '#app')
class App extends VueAppBase {
  factory App() => VueAppBase.create((context) => new App._(context));
  App._(context): super(context);
}

App app;

Future main() async {
  await initVue();
  app = new App();
}

component_a.dart


import 'package:vue2/vue.dart';

@VueComponent(name: 'component-a', template: '''
<div>Hello from ComponentA
</div>
''')
class ComponentA extends VueComponentBase {
  ComponentA(context) : super(context);
}

component_b.dart


import 'package:vue2/vue.dart';

@VueComponent(name: 'component-b', template: '''
<div>Hello from ComponentB
</div>
''')
class ComponentB extends VueComponentBase {
  ComponentB(context) : super(context);
}

Create library and start with component_a (This still works)

components.dart

library components;

import 'package:vue2/vue.dart';

part 'component_a.dart';

component_a.dart will become this

part of components;

@VueComponent(name: 'component-a', template: '''
<div>Hello from ComponentA
</div>
''')
class ComponentA extends VueComponentBase {
  ComponentA(context) : super(context);
}

main.dart (importing components.dart instead of component_a.dart

import 'components/components.dart';
import 'components/component_b.dart';
import 'package:vue2/vue.dart';
import 'dart:async';

@VueApp(el: '#app')
class App extends VueAppBase {
  factory App() => VueAppBase.create((context) => new App._(context));
  App._(context): super(context);
}

App app;

Future main() async {
  await initVue();
  app = new App();
}

Adding second component to library (Does not work)

Updated components.dart to include components_b.dart

library components;

import 'package:vue2/vue.dart';

part 'component_a.dart';
part 'component_b.dart';

component_b.dart is updated to this

part of components;

@VueComponent(name: 'component-b', template: '''
<div>Hello from ComponentB
</div>
''')
class ComponentB extends VueComponentBase {
  ComponentB(context) : super(context);
}

main.dart updated by removing component_b.dart

import 'components/components.dart';
import 'package:vue2/vue.dart';
import 'dart:async';

@VueApp(el: '#app')
class App extends VueAppBase {
  factory App() => VueAppBase.create((context) => new App._(context));
  App._(context): super(context);
}

App app;

Future main() async {
  await initVue();
  app = new App();
}

and now I start getting this error

error

refi64 commented 6 years ago

Ohh, I see the problem here.

As a workaround, instead of using part and part of, I think you could probably use export (or import) + hide:

# in components.dart
library components;

export 'component_a.dart' hide vuedart_INTERNAL_init;

I'll fix it later today.

refi64 commented 6 years ago

@adeel41 Ok, this should be fixed now!

adeel41 commented 6 years ago

Please correct me if I am wrong, I am assuming that the code which I also sent you in the zip file should work without any further modification. Since the package is not updated on http://pub.dartlang.org therefore I updated my pubspec.yaml to point to your git repository. i.e.

  vue2:
    git: https://github.com/kirbyfan64/vuedart.git

but now I am getting a different but similar error. This is the error message

[error] The name '_vuedart_INTERNAL_init' is already defined. (C:\Users\adeel\AppData\Local\Temp\pub_6304110e-f8af-11e7-820a-54e1ad2cfad2\web\components\component_b.dart, line 28, col 6)

Please fix all errors before compiling (warnings are okay).
Error compiling dartdevc module:LibraryImportDoNotWork|web/web__main.initialize.js

[error] The getter '_vuedart_INTERNAL_init' isn't defined for the class 'i1'. (C:\Users\adeel\AppData\Local\Temp\pub_6304110e-f8af-11e7-820a-54e1ad2cfad2\web\main.initialize.dart, line 9, col 37)
[error] The getter '_vuedart_INTERNAL_init' isn't defined for the class 'i1'. (C:\Users\adeel\AppData\Local\Temp\pub_6304110e-f8af-11e7-820a-54e1ad2cfad2\web\main.initialize.dart, line 10, col 37)
[error] The getter '_vuedart_INTERNAL_init' isn't defined for the class 'i0'. (C:\Users\adeel\AppData\Local\Temp\pub_6304110e-f8af-11e7-820a-54e1ad2cfad2\web\main.initialize.dart, line 11, col 37)

Please fix all errors before compiling (warnings are okay).
Build failed.

refi64 commented 6 years ago

@adeel41 Ok, sorry, I screwed up the last fix. This one should definitely work now!

adeel41 commented 6 years ago

Cool, It works. Thanks a lot.

refi64 commented 6 years ago

@adeel41 FYI I just released VueDart 0.3.2, which should have this fix.

refi64 / vuedart