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) layouts/ 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" src="./path/to/script.js"></script>
  </head>

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

Import Attributes

Greenwood supports Import Attributes for the client and the the server seamlessly, supporting both CSS and JSON module scripts seamlessly.

import sheet from './styles.css' with { type: 'css' };
import data from './data.json' with { type: 'json' };

⚠️ Although Import Attributes are not baseline yet, Greenwood supports polyfilling them with a configuration flag.

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