You use part/part of in dart code to create libraries, how does the HTML templates in WebComponents fit into this? How do I make the HTML templates part of the library? Also when i use <link rel> to import the relevant component, what do I reference?
I have this problem where I wrote a web componet A, so I have A.dart and A.html, I would like to package A into a library. If I reference A.html using a link rel anywhere the compiler will not package it into the library and instead treat it as a separate file.
Is each dart application a separate package or can I create multiple packages inside of a dart application project in dart-editor? The reason why I ask is because I want to separate my application into components
/web
/components
A.html
A.dart
index.html
index.dart
where everything under /components get put into a package that can be imported by index.html
There is a distinction between a Dart library and a Dart package. A library contains only Dart code, while a package contains Dart libraries as well as their relevant assets. library foo; part of foo; are only relevant in a code context. So long as your assets are in the same package directory as your Dart code (i.e. the directory that has pubspec.yaml at the top level) they are part of the same package.
You can import assets from packages by specifying the package path:
<link rel="import" href="package:foo/a.html">
Where foo is a package in your web/packages directory.
Related
I'm little bit confused about which style of import should I use when importing implementation libraries (code under src/lib) from another libraries (and tests) in my own package?
The docs recommends the opposite options.
In pub docs, it says:
When you use libraries from within your own package, even code in src, you can (and should) still use package: to import them.
But in "Effective Dart", it says:
When referencing a library inside your package’s lib directory from another library in that same package, use a relative URI, not an explicit package: URI.
In the end, which style should I use in such cases:
import implementation library (under lib/src/) from with public library (under just lib/)?
import implementation library (lib/src/foo.dart) from within its test (test/src(?)/foo_test.dart)?
import public library (lib/foo.dart) from within its test (test/foo_test.dart)?
I am trying to understand Dart's recommended project structure and not seeing the "forest through the trees".
So, if my project is intended to be a reusable library, say, a logging framework of some sort, then if I understand the above link correctly, I want all of my development to be under a lib and lib/src directory.
But what if I am building a web app? Where do my Dart source files go? Under packages? Specifically:
Where do I place Dart source files for a web app (not a lib)?
Are my web app's "packages" just directories that are logically organized similar to Java packages?
Does Dart recommend a 1-class-per-file convention for its source code?
1)
your_app_package/web
your_app_package/web/src/xxx
static content like jpg, css go to
* your_app_package/asset
2) the packages directory is maintained automatically. You configure in the file pubspec.yaml which 3rd party libraries you want to use and then call pub get or pub upgrade and the packages directory is updated automatically (the Darteditor does this automatically when you update pubspec.yaml).
3) not that I know of.
I had some problems putting additional classed in the code file of a Polymer element though. But I guess this is just a temporary limitation of Polymer.
I'm currently working on a project which contains a number of components (polymer elements). All said and done, I'll probably be looking at around 10+ components for the application. At the moment, following Pub's Package Layout Conventions each .html and associated .dart file is in the web/ directory.
It would be nice to have them in lib/src/ of my application and only have the main files in web/ however at the moment <link ref="import" href="package:my_app/src/my_component.html"> will not work (See Issue 12867).
Are there currently any conventions in use to handle multiple (private) components for an app? Should I create a web/src/ directory to load imports/source files relative to the web/ directory? Would it even make sense to keep Polymer Element .html files in lib/src/ (assuming it was supported) as they're not pure dart files as traditionally recommended/expected in a pub package layout?
As far as I understand, package: works only for external components (dependencies declared in pubspec.yaml), and the default path is the packages folder (created by pub install). See the getting started section here: Dart Pub
I keep components in their own folders under the web directory so web/component1, web/component2 and so on and I use relative links to import across components. Not sure if this is the best practice but it works.
If I'm just getting started authoring and managing my client source code using dart within a PHP or Rails project (similar to haxe or coffeescript), what convention(s) should be used for project structure?
Does any of this change if I say I'm mainly going to be transpiling my code to JavaScrpt?
Dart package layout conventions:
http://pub.dartlang.org/doc/package-layout.html
The more relevant parts for a client side dart application:
http://pub.dartlang.org/doc/package-layout.html#public-libraries
http://pub.dartlang.org/doc/package-layout.html#implementation-files
http://pub.dartlang.org/doc/package-layout.html#web-files
Long story short, put your dart libraries in the lib/ folder. The Dart scripts in here define what other packages (including your web/) can import and use. Entry points--scripts with main()--cannot go in the lib folder.
Files in lib/ can me imported with import "package:project_name/file_name.dart".
Internal libraries that should only be imported and used inside of the package should be put in lib/src/.
Currently I import components from a package by a relative path:
<link rel="components" href="packages/packageA/components/login.html">
However when I start nesting packages this doesn't work properly anymore. I set up a small example which can be found here: https://github.com/nikgraf/nesting-components
When I try to build package app I get this error message:
error web/packages/packageA/components/login.html:6:5: exception while reading file "web/packages/packageA/components/packages/packageB/components/button.html", original message:
FileIOException: Cannot open file 'web/packages/packageA/components/packages/packageB/components/button.html' (OS Error: No such file or directory, errno = 2)
<link rel="components" href="packages/packageB/components/button.html">
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
warning web/packages/packageA/components/login.html:12:7: custom element with tag name button not found.
<div is="button"></div>
^^^^^^^^^^^^^^^^^
Current structure:
app
- dependency: PackageA
PackageA
- dependency: PackageB
Some Background information which might help:
My application contains the x-login component from package A which is used by several Dart apps we build. The x-login component and in general package A contains specific code for our applications. x-login should able to use the x-button component which is in package B. Package B is a package with generic components we want to publish.
Do you have any advice on structuring my application differently or how to import components in a better way?
Having separate packages for your utility components and then domain specific components seems like a good idea.
What you can do is use the "package:packageA" style syntax when including the components without having to use relative paths.
<link rel="import" href="package:packageA/components/login.html">
As long as your pubspec knows where packageA is, you should be fine. This means when you change the path to the package dependancy to be either a git or pub url it will still work.
Pub Package Manager Dependencies doc.