Initial commit

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = tab
+insert_final_newline = true
+trim_trailing_whitespace = false
+
+[{.*,*.md,*.json,*.toml,*.yml,}]
+indent_style = space

.eslintignore

@@ -0,0 +1 @@
+test/**/*.js

.eslintrc.cjs

@@ -0,0 +1,17 @@
+/** @type {import("@types/eslint").Linter.Config} */
+module.exports = {
+  env: {
+    node: true,
+  },
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint', 'prettier'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+  ],
+  rules: {
+    // We don't want to leak logging into our user's console unless it's an error
+    'no-console': ['error', { allow: ['warn', 'error'] }],
+  },
+};

.gitignore

@@ -0,0 +1,8 @@
+node_modules
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+.DS_Store

.prettierrc.cjs

@@ -0,0 +1,24 @@
+/** @type {import("@types/prettier").Options} */
+module.exports = {
+  printWidth: 100,
+  semi: true,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'es5',
+  useTabs: true,
+  plugins: ['./node_modules/prettier-plugin-astro'],
+  overrides: [
+    {
+      files: '*.astro',
+      options: {
+        parser: 'astro',
+      },
+    },
+    {
+      files: ['.*', '*.json', '*.md', '*.toml', '*.yml'],
+      options: {
+        useTabs: false,
+      },
+    },
+  ],
+};

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "astro-build.astro-vscode",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "editorconfig.editorconfig"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll": true
+  },
+  "cSpell.words": ["Astro"],
+  "prettier.documentSelectors": ["**/*.astro"]
+}

README.md

@@ -0,0 +1,72 @@
+# Astro Component Template 🧑‍🚀
+
+This is [an unofficial template](#how-is-this-different-from-the-official-component-template) meant to ease the development of components for [Astro](https://astro.build/) that are intended for distribution. It does so by providing you with:
+
+- A clear default directory structure
+- Proper TypeScript settings for working with Astro
+- Default settings for ESLint, Prettier and EditorConfig inspired by the formatting used in the Astro project itself (also, [the config files are typed 👀](https://princesseuh.netlify.app/article/youshouldtypeyourconfigfiles/))
+- Ready-to-use testing tools powered by the libraries also used by the Astro project (Mocha and Chai), also contains [astro-component-tester](https://github.com/Princesseuh/astro-component-tester) to help you test the output of your component(s)
+- Preconfigured VS Code workspace settings file with settings meant to make development cozy and nice
+
+Hopefully, all of this together will provide you with a fun and comfortable development environnement for working on your Astro component! 🚀 Also, never forget that this is only a template to get you started, if you don't agree with any of the choices made, feel free to change it to fit your project better!
+
+**⚠️ Don't forget:** You should edit `package.json` with the info relevant to your project, such as a proper `name`, a license, a link to the repository for the npm website and other settings. You should also adjust the Astro `peerDependency` to the lowest version of Astro you support.
+
+## Folder Structure
+
+```plaintext
+├── .vscode/                    # VS Code settings folder
+│   ├── settings.json           # Workspace settings
+│   └── extensions.json         # Recommended extensions to install
+├── src/                        # Your component source code
+│   ├── Component.astro         # Example component file
+│   └── main.ts                 # Example source code file
+├── test/                       # Your component tests
+│   └── example.test.js         # Example tests
+└── index.ts                    # Should contain all the exports your component provide to users
+```
+
+ESLint, Prettier and EditorConfig settings are respectively located in the following files: `.eslintrc.js`, `.prettierrc.js` and `.editorconfig` at the root of this template project.
+
+## Commands
+
+The following npm scripts are provided to lint and format your project:
+
+| Command          | Action                                                        |
+| :--------------- | :------------------------------------------------------------ |
+| `npm run test`   | Run tests using Mocha                                         |
+| `npm run format` | Format your project using Prettier, this edits files in-place |
+| `npm run lint`   | Lint your project using ESLint                                |
+
+In VS Code, you can access those commands in the Explorer in the `NPM Scripts` section.
+
+## Frequently asked questions
+
+### How is this different from [the official component template](https://github.com/withastro/astro/tree/main/examples/component)?
+
+At the end of the day, they both have the same goal: Giving you a template to start from to build a component for Astro. However, they have slightly different philosophies.
+
+Notably, the official template uses a mono-repo structure, whereas this template uses a normal, straightforward repo. Additionally, this template is a bit more opinionated than the official one, giving you preconfigured support for ESLint, Prettier, VS Code and EditorConfig, as well as testing support.
+
+It's up to you to choose which one you prefer, they're both good options!
+
+### How do I try my component in development?
+
+> `npm` is used here for brevity, the same concept applies to other package managers!
+
+This template is a normal npm package, which mean that you can install it as a local folder or using [npm link](https://docs.npmjs.com/cli/v8/commands/npm-link).
+
+For example, with the following folder structure:
+
+```plaintext
+├── component/   # Your component using this template
+└── project/     # A standard Astro project
+```
+
+You can go into `project` and type the following command: `npm link ../component`. Changes to your component will be automatically reflected in your Astro project!
+
+### Which package manager should I use?
+
+The one you prefer! This template makes no assumption.
+
+The only package-manager-related thing in this repo is that the prettier plugin has the proper configuration needed to work with pnpm (but it works with the other too, pnpm just needs [additional settings](https://github.com/withastro/prettier-plugin-astro#pnpm-support)).

index.ts

@@ -0,0 +1,5 @@
+// Do not write code directly here, instead use the `src` folder!
+
+// What you should do here is re-exports all the things you want your user to access, ex:
+// export { HelloWorld } from "./src/main.ts"
+// export type { HelloWorldResult } from "./src/types.ts"

package.json

@@ -0,0 +1,42 @@
+{
+  "name": "astro-component-name",
+  "version": "0.1.0",
+  "type": "module",
+  "exports": {
+    ".": "./index.ts"
+  },
+  "files": [
+    "src",
+    "index.ts"
+  ],
+  "keywords": [
+    "astro-component"
+  ],
+  "scripts": {
+    "test": "mocha --parallel --timeout 15000",
+    "format": "prettier -w .",
+    "lint": "eslint . --ext .ts,.js"
+  },
+  "devDependencies": {
+    "@types/chai": "^4.3.3",
+    "@types/eslint": "^8.4.6",
+    "@types/mocha": "^9.1.1",
+    "@types/node": "^18.7.18",
+    "@types/prettier": "^2.7.0",
+    "@typescript-eslint/eslint-plugin": "^5.37.0",
+    "@typescript-eslint/parser": "^5.37.0",
+    "astro": "^1.0.0",
+    "astro-component-tester": "^0.6.0",
+    "chai": "^4.3.6",
+    "eslint": "^8.23.1",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "mocha": "^10.0.0",
+    "prettier": "^2.7.1",
+    "prettier-plugin-astro": "^0.5.4",
+    "typescript": "^4.8.3"
+  },
+  "peerDependencies": {
+    "astro": "^1.0.0"
+  }
+}

src/Component.astro

@@ -0,0 +1,3 @@
+---
+// Write your component code in this file!
+---

src/main.ts

@@ -0,0 +1 @@
+// Write your component's code here!

test/README.md

@@ -0,0 +1,7 @@
+# `test` directory
+
+This folder contain tests for your component(s). This templates makes no assumption regarding your way of writting code. You can either write the code first and then the tests or the reverse (known as Test-Driven Development). Ultimately, what's important is that your code works and is tested to prove it!
+
+Included in this template is [astro-component-tester](https://github.com/Princesseuh/astro-component-tester), a tool made to help you test the output of your component(s), check out its GitHub page for more info on how to use it
+
+A commented example test (see `example.test.js`) is included in this folder to help you learn how to write a basic test for your project

test/example.test.js

@@ -0,0 +1,24 @@
+import { expect } from 'chai';
+import { getComponentOutput } from 'astro-component-tester';
+
+describe('Example Tests', () => {
+	// Simple test to get us started with the syntax
+	it('should equal 2', () => {
+		expect(1 + 1).to.equal(2);
+	});
+
+	// This show us how to write a test for our component's output using astro-component-tester
+	describe('Component test', async () => {
+		let component;
+
+		// First get the component's output, this returns an object containing the generated html (`.html`)
+		before(async () => {
+			component = await getComponentOutput('./src/Component.astro');
+		});
+
+		// Unless you modified /src/Component.astro, this should pass, as the component is empty apart from the frontmatter and new lines
+		it('example component should be empty', () => {
+			expect(component.html).to.equal('\n');
+		});
+	});
+});

tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "module": "ESNext",
+    "allowJs": true,
+    "noEmit": true
+  },
+  "include": ["index.ts", "src"]
+}