Greenwood - Scripts and Imports

Scripts and Imports

Greenwood generally does not have any opinion on how you structure your site, aside from the pre-determined pages/ and (optional) templates/ directories. It supports all standard files that you can open in a web browser.

Script Tags

Script tags can be done in any standards compliant way that will work in a browser. So just as in HTML, you can do anything you need, like below:

<!DOCTYPE html>
<html lang="en" prefix="og:http://ogp.me/ns#">

  <head>
    <script>
      alert('hello');
    </script>

    <script src="/path/to/script.js"></script>
    <script src="https://unpkg.com/...."></script>
  </head>

  <body>
    <!-- content goes here -->
  </body>
  
</html>

Imports

Greenwood also supports (and recommends) usage of ECMAScript Modules (ESM), like in the example below.

<!DOCTYPE html>
<html lang="en" prefix="og:http://ogp.me/ns#">

  <head>
    <script type="module">
      import { Foo } from '/path/to/foo.js';

      Foo.something();
    </script>

    <script type="module" src="/path/to/script.js"></script>
  </head>

  <body>
    <!-- content goes here -->
  </body>
  
</html>

Extensions and Bare Imports

One important note to consider is that ESM by spec definition, expects a couple important characteristics from an import path:

It must be a relative path
It must have an extension

// happy panda
import { Foo } from './foo.js';

// sad panda
import { Foo } from './foo';

However, Greenwood also supports bare module specifiers for packages you install with a package manager from npm.

import { html, LitElement } from 'lit';

By creating an import map for you, Greenwood knows how resolve these but it will only look in node_modules.

As a bonus, Greenwood also auto resolves paths with references to node_modules as well if the path starts with /node_modules/

<script type="module">
  import { Foo } from '/node_modules/foo/dist/main.js';

  Foo.something();
</script>

So the rule of thumb is:

If it's a package from npm, you can use bare specifiers and no extension
Otherwise, you will need to use a relative path and the extension

Edit on GitHub