5

According to the Package layout conventions the web folder should contain the following:

HTML, CSS, images, and, heck, probably even some JavaScript. All of that goes into your package’s web directory. You’re free to organize the contents of that to your heart’s content. Go crazy with subdirectories if that makes you happy.

So my web directory looks something like this:

web/data_access
web/model
web/ui
web/ui/navigation
etc.

Now, how to I manage all those import statements. I get a lot of statements like:

import '../../model/my_model.dart';
import '../../data_access/mock_dao.dart';
etc.

I don't like using that many ../ in my imports because this is fragile and I get problems whenever I change anything in my folder structure.

Is there a better way to organize code inside the web folder?

or

Is there another way to do the imports?

Juniper Belmont
  • 3,296
  • 2
  • 18
  • 28
Marco Jakob
  • 1,068
  • 1
  • 13
  • 20

2 Answers2

4

I put almost all of my app's code into lib, to avoid the issues you're seeing. This works even for web components.

See this components from widget.dart: https://github.com/kevmoo/widget.dart/tree/master/lib/components

I usually only put app.dart into web/, which simply pulls in libraries from lib and initializes the app.

See this example of an app that pulls in a pub package that has components: https://github.com/sethladd/catpic-app

This is what my HTML file looks like. Notice the inclusion of packages in the path:

<!DOCTYPE html>
<html>
<head>
  <title>Your life is complete</title>
  <link rel="components" href="packages/catpic/components/cat_pic.html">
  <link rel="components" href="packages/frame/components/frame.html">
  <link rel="stylesheet" href="styles.css">
</head>
Seth Ladd
  • 112,095
  • 66
  • 196
  • 279
  • I really like your project structure. Will try that too when I'm at home. – MarioP Apr 23 '13 at 08:56
  • I have to think before posting - I also wanted to ask: Is there any documentation on this? Even now that I know what I'm looking for, i can't find anything on dartlang.org - It took me a while to figure out why "package:widget/effects.dart" worked (My guess is because the application name is "widget"?) – MarioP Apr 23 '13 at 09:07
  • I do have some of my web components in lib and import them as you describe. But it's very cumbersome for debugging: In case of an error, the debugger jumps to the file under `web/out/packages` and it happens a lot that I edit the wrong file. Then, if I want to set a breakpoint it's difficult to find the right place to set it. – Marco Jakob Apr 23 '13 at 10:25
  • @MarcoJ. sounds like we can do a better job here. Feel free to open bugs at http://dartbug.com/new with your proposed behavior. The editor should be preventing you from editing anything from web/out – Seth Ladd Apr 23 '13 at 20:27
  • I think this is the best answer (for now). I'm also doing as Seth described, I have `server.dart`, `shared.dart` and `client.dart`, where the `client.dart` is under `web` and pulls in the libraries and initializes the app. I'm also using `packages/` in web component references. This has worked OK so far and we have 43 web components. – Kai Sellgren Apr 24 '13 at 11:48
3

Unfortunately, no. There is an open feature request addressing this, but implementing this may take a while. The best way to work around this is to bundle multiple classes into one file, or multiple files into a library - effectively reducing the number of import statements. I went as far as making my entire application one big library with part of statements so I wouldn't have to deal with import statements. While this doesn't eliminate the underlying problem, it works for now.

Also, refactoring instead of simply renaming when changing the folder structure changes affected import statements, eliminating the pain of manually adjusting them.

Web components could be imported into a library, just to be re-exported using the export statement, thus bundling them into a single import.

MarioP
  • 3,752
  • 1
  • 23
  • 32
  • This workaround is ok, but it does not work with **Web Components** as each Web Component is its own library (see [comment by Chris Bucket](http://stackoverflow.com/questions/15999088/dart-library-layout-with-web-component#comment22820794_15999088). – Marco Jakob Apr 22 '13 at 13:40
  • I hope the feature request you mentioned won't take too long since I have many Web Components. – Marco Jakob Apr 22 '13 at 13:41
  • This workaround also has other shortcomings, such as slowing down the editor when the project grows larger. Sadly, i don't know of any other workarounds. Imho, imports are kinda awkward at the moment. That said, if you have to use "../" in your statements, you can change the folder structure with refactoring - this changes the import statements to reflect the new structure. still not elegant, but it works... – MarioP Apr 22 '13 at 13:49
  • @MarcoJ. but you still can make a library, importing all the web component libraries and re-exposing them via the `export` statement. maybe that would be more doable? – MarioP Apr 22 '13 at 13:55
  • Thanks, I'll try to do it with the export statement for now. – Marco Jakob Apr 22 '13 at 19:13
  • @MarcoJ. In case you still follow this question, Seth's approach looks much cleaner than mine. Maybe try it and change the accepted answer if it suits you? – MarioP Apr 23 '13 at 08:59