### Run setup script for Git submodules

Source: https://symbiotejs.org/2x/docs/Get_started/Get_started

Executes the combined setup script defined in `package.json` to initialize Git submodules, set the Symbiote.js version, and install npm dependencies.

```Shell
npm run setup
```

--------------------------------

### Define package.json scripts for Git submodule management

Source: https://symbiotejs.org/2x/docs/Get_started/Get_started

Provides example `package.json` scripts to automate Git submodule updates and version switching. This streamlines the setup and maintenance of submodule dependencies.

```JSON
{
  "scripts": {
    "git-modules": "git submodule update --init --recursive --remote",
    "sym-version": "cd symbiote && git checkout <VERSION_TAG> && cd ..",
    "setup": "npm run git-modules && npm run sym-version && npm i"
  }
}
```

--------------------------------

### Install Symbiote.js via npm

Source: https://symbiotejs.org/2x/docs/Get_started/Get_started

Installs the Symbiote.js package using npm. This is the standard way to add the library to your project dependencies.

```Shell
npm i @symbiotejs/symbiote
```

--------------------------------

### Install Symbiote.js as a dev dependency

Source: https://symbiotejs.org/2x/docs/Get_started/Get_started

Installs Symbiote.js as a development dependency. This is recommended when using CDN module sharing for static analysis and TypeScript support.

```Shell
npm install @symbiotejs/symbiote --save-dev
```

--------------------------------

### Update Git submodules

Source: https://symbiotejs.org/2x/docs/Get_started/Get_started

Activates and updates Git submodules, including Symbiote.js, in a cloned host repository. This ensures all submodules are initialized and up-to-date.

```Shell
git submodule update --init --recursive --remote
```

--------------------------------

### Add Symbiote.js as a Git submodule

Source: https://symbiotejs.org/2x/docs/Get_started/Get_started

Initializes Symbiote.js as a Git submodule, linking it to the main branch of the official repository. This integrates the library directly into your project's version control.

```Shell
git submodule add -b main https://github.com/symbiotejs/symbiote.js.git ./symbiote
```

--------------------------------

### Import Symbiote.js via CDN

Source: https://symbiotejs.org/2x/docs/Get_started/Get_started

Imports Symbiote.js directly from a CDN using an ES module import. This allows sharing the library across independent application parts without local installation.

```JavaScript
import { Symbiote } from 'https://esm.run/@symbiotejs/symbiote';
```

--------------------------------

### Switch Git submodule to a specific revision

Source: https://symbiotejs.org/2x/docs/Get_started/Get_started

Navigates into the Symbiote.js submodule directory and checks out a specific version tag. This allows pinning the submodule to a particular release.

```Shell
cd symbiote && git checkout <VERSION_TAG>
```

--------------------------------

### Create a basic Symbiote.js component in HTML

Source: https://symbiotejs.org/2x/docs/Get_started/Get_started

Demonstrates how to create a simple Symbiote.js component directly within an HTML file. It includes import maps, component definition, template, styles, and registration.

```HTML
<script type="importmap">
  {
    "imports": {
      "@symbiotejs/symbiote": "https://esm.run/@symbiotejs/symbiote"
    }
  }
</script>

<script type="module">
  import Symbiote, { html, css } from '@symbiotejs/symbiote';

  export class MyComponent extends Symbiote {

    // Initiate state:
    init$ = {
      count: 0,
      increment: () => {
        this.$.count++;
      },
    }

  }

  // Define template:
  MyComponent.template = html`
    <h2>{{count}}</h2>
    <button ${{onclick: 'increment'}}>Click me!</button>
  `;

  // Describe styles:
  MyComponent.rootStyles = css`
    my-component {
      color: #f00;
    }
  `;

  // Register the new HTML-tag in browser:
  MyComponent.reg('my-component');
</script>

<my-component></my-component>
```

--------------------------------

### Configure tsconfig.json for module depth

Source: https://symbiotejs.org/2x/docs/Get_started/Get_started

Adds `maxNodeModuleJsDepth` to `tsconfig.json` to resolve potential issues with module resolution depth, especially when dealing with complex module structures.

```JSON
{
  "compilerOptions": {
    "allowJs": true,
    "maxNodeModuleJsDepth": 2
  }
}
```

--------------------------------

### Define TypeScript declarations for CDN imports

Source: https://symbiotejs.org/2x/docs/Get_started/Get_started

Provides TypeScript declaration mapping for CDN-imported modules. This ensures proper type checking and 'Go to Definition' support for external modules.

```TypeScript
// List out all your dependencies.
// For every URL, you must map it to its local module:

declare module 'https://esm.run/@symbiotejs/symbiote' {
  export * from '@symbiotejs/symbiote';
}
```

--------------------------------

### Extend Symbiote base class for application components

Source: https://symbiotejs.org/2x/docs/Get_started/Get_started

Defines a common base class for application components by extending `Symbiote`. This centralizes HTTPS dependency management and provides an endpoint for app-level extensions.

```JavaScript
import { Symbiote } from 'https://esm.run/@symbiotejs/symbiote';

export class AppComponent extends Symbiote {
  // Your code...
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.