Non-JS file types

Fallow finds .html files and reads the <script src> and <link> tags as module graph edges. This covers projects with HTML entry points, such as Parcel or setups with no framework.

Fallow reads:

• <script src="./main.js"> script references
• <link rel="stylesheet" href="./styles.css"> stylesheet references
• <link rel="modulepreload" href="./vendor.js"> module preload references
• Root-relative paths (for example <script src="/src/main.tsx">). Fallow resolves them against the directory of the HTML file first, then against the project root, then against public/ in the project root. html tagged templates in JS and TS files use the same order, without the public/ step (see the SSR layouts tab).

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="./styles/main.css" />
    <link rel="modulepreload" href="./vendor/lodash.js" />
  </head>
  <body>
    <div id="app"></div>
    <script src="./src/main.ts"></script>
  </body>
</html>

Fallow reads references to ./styles/main.css, ./vendor/lodash.js, and ./src/main.ts from this file.

Angular template complexity. fallow health reports the complexity of Angular templates as synthetic <template> findings. This covers standalone .html files that templateUrl references and inline @Component({ template: \...` })` literals. Fallow counts these template constructs:

• control-flow blocks (@if, @for, @switch, @case, @defer (when ...), @let)
• legacy structural directives (*ngIf, *ngFor)
• bound attributes ([x], (x), bind-x, on-x)
• \{\{ \}\} interpolations

Fallow reports an inline-template finding on the @Component decorator line. To suppress it, put // fallow-ignore-next-line complexity directly above the decorator. To suppress an external-template finding, put <!-- fallow-ignore-file complexity --> at the top of the .html file.

Fallow reads the <script> block of Vue and Svelte single-file components and analyzes it like a JS or TS module. It also reads the <template> section for component references, directives, and expressions. An import that only the template uses therefore counts as used.

Script extraction:

• <script> and <script setup> blocks
• lang="ts" and lang="tsx" attributes
• <script src="./external.ts"> external script references (Vue only. In Svelte, a <script src> tag is runtime HTML and does not add an import.)
• HTML comments (<!-- ... -->), which fallow removes before parsing

Vue template tracking:

• Component tags: <MyComponent> resolves to imported MyComponent
• Custom directives: v-focus-trap resolves to imported vFocusTrap
• v-on and v-bind object syntax (for example v-on="handlers")
• Template expressions: \{\{ formatDate() \}\} marks formatDate as used
• Namespace member access: utils.formatDate in a template marks the member as used

Svelte template tracking:

• Component tags: <Button> resolves to imported Button
• Directives: use:tooltip, transition:fade, animate:flip, in:fly, out:fade
• Attribute expressions: {expression} and shorthand attributes {variable}
• $store subscriptions: $myStore marks myStore as used

<script setup lang="ts">
import { ref } from 'vue'
import { formatDate } from '@/utils/date'
import FocusTrap from '@/components/FocusTrap.vue'

const count = ref(0)
</script>

<template>
  <FocusTrap>
    <div>{{ formatDate(new Date()) }}</div>
  </FocusTrap>
</template>

Fallow reads imports of ref from vue, formatDate from @/utils/date, and FocusTrap from @/components/FocusTrap.vue. The template uses <FocusTrap> and formatDate, so fallow does not report them as unused, although the script block does not use them.

SSR frameworks such as Hono can render HTML from a tagged template literal (html`...`). Fallow reads <script src="..."> and <link rel="stylesheet|modulepreload" href="..."> in these templates as it does in plain HTML. Each one is an asset reference that keeps the target file reachable.

Fallow reads:

• <script src="./app.js"> inside html`...` tagged templates
• <link rel="stylesheet" href="./global.css"> inside html`...` tagged templates
• <link rel="modulepreload" href="./vendor.js"> inside html`...` tagged templates
• Root-relative paths (<link href="/static/style.css">). Fallow resolves them against the parent directory of the source file first, then against the project root

import { html } from 'hono/html'

export const Layout = ({ title, body }: { title: string; body: string }) => html`
  <!doctype html>
  <html>
    <head>
      <title>${title}</title>
      <link rel="stylesheet" href="/static/style.css" />
      <script defer src="/static/app.js"></script>
    </head>
    <body>${body}</body>
  </html>
`

Fallow reads references to /static/style.css and /static/app.js from this file and marks those files in static/ as reachable.

Plain JavaScript files can reference TypeScript types through JSDoc import() expressions. Fallow reads these references and marks the types as used, so untyped JS files do not cause false unused-export reports.

/**
 * @param cfg {import('./types.ts').Config}
 * @returns {import('./types.ts').Result}
 */
function boot(cfg) {
  return { ok: true };
}

Fallow marks the Config and Result types from ./types.ts as used, although no import statement binds them. This works in all JSDoc tags (@param, @returns, @type, @typedef, @callback). Fallow also supports:

• union annotations with more than one import() expression ({import('./a').A | import('./b').B})
• nested member access
• bare package specifiers
• parent-relative paths

Astro components start with a frontmatter block between two --- lines. Fallow analyzes the content of this block as TypeScript.

Fallow also follows the client scripts in the template body: <script src="..."> references and ESM import statements in inline <script> blocks. Astro bundles both into the page at build time, so their targets stay reachable.

---
import Header from '../components/Header.astro'
import Footer from '../components/Footer.astro'
import type { Props } from './types'
---

<html>
  <body>
    <Header />
    <slot />
    <Footer />
    <script src="../scripts/analytics.ts"></script>
    <script>
      import '../scripts/hydrate'
    </script>
  </body>
</html>

Fallow reads imports of Header, Footer, and the Props type from this file. It also reads ../scripts/analytics.ts (external) and ../scripts/hydrate (inline ESM).

MDX files can contain JavaScript import and export statements next to Markdown content. Fallow adds these statements to the module graph.

import { CodeBlock } from '../components/CodeBlock'
import { Callout } from '../components/Callout'

export const meta = { title: 'Getting Started' }

# Getting Started

<CodeBlock language="bash">
  npm install fallow
</CodeBlock>

Fallow tracks the imports of CodeBlock and Callout, and the named export meta.

GraphQL documents can import fragments from other .graphql and .gql files with #import comments. Fallow reads these relative links and keeps the imported fragment files reachable.

Fallow reads:

• #import "./fragment.graphql" relative imports
• # import '../shared/fields.gql' with optional whitespace after #
• Relative imports with no extension, such as #import "./fragment". Fallow tries .graphql and .gql

#import "./fragments/user-fields"

query CurrentUser {
  currentUser {
    ...UserFields
  }
}

fragment UserFields on User {
  id
  name
}

Fallow reads the reference to ./fragments/user-fields from query.graphql. Because the reference has no extension, fallow tries .graphql and .gql. It then marks fragments/user-fields.graphql as reachable.

Fallow treats the class names in CSS and SCSS module files (.module.css and .module.scss) as named exports. When a component imports styles from a CSS module, fallow knows which classes exist.

.root {
  display: flex;
}

.primary {
  background: blue;
}

.disabled {
  opacity: 0.5;
}

This file exports root, primary, and disabled as named exports.

CSS features fallow tracks:

React Native projects use a file extension per platform for each platform implementation. Fallow treats these files as variants of the same module.

Supported platform extensions:

src/
  Button.tsx          # Default implementation
  Button.web.tsx      # Web override
  Button.native.tsx   # Native override

When another file imports ./Button, fallow resolves the import to all platform variants and marks each one as reachable.