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,13 @@
+/** @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,7 @@
+node_modules
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.DS_Store

.prettierrc.cjs

@@ -0,0 +1,23 @@
+/** @type {import("@types/prettier").Options */
+module.exports = {
+	printWidth: 180,
+	semi: true,
+	singleQuote: true,
+	tabWidth: 2,
+	trailingComma: 'es5',
+	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,3 @@
+{
+  "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,53 @@
+# Astro Component Template 🧑‍🚀
+
+This is a 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 contain [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         # Very strongly 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
+
+### Is this official?
+
+No, Astro does not have an official template for component and other options than this one exists. You should choose the one that fits your needs the best!
+
+### Which package manage 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 plugins has the proper configuration needed to work with pnpm (but it works with the other too, pnpm just need additional settings)

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,38 @@
+{
+  "name": "astro-component-name",
+  "version": "0.1.0",
+  "type": "module",
+  "exports": {
+    ".": "./index.ts"
+  },
+  "files": [
+    "src",
+    "index.ts"
+  ],
+  "scripts": {
+    "test": "mocha --parallel --timeout 15000",
+    "format": "prettier -w .",
+    "lint": "eslint . --ext .ts,.js"
+  },
+  "devDependencies": {
+    "@types/chai": "^4.3.0",
+    "@types/eslint": "^8.4.1",
+    "@types/mocha": "^9.1.0",
+    "@types/node": "^17.0.19",
+    "@types/prettier": "^2.4.4",
+    "@typescript-eslint/eslint-plugin": "^5.12.1",
+    "@typescript-eslint/parser": "^5.12.1",
+    "astro-component-tester": "^0.3.0",
+    "chai": "^4.3.6",
+    "eslint": "^8.9.0",
+    "eslint-config-prettier": "^8.4.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "mocha": "^9.2.1",
+    "prettier": "^2.5.1",
+    "prettier-plugin-astro": "^0.0.12",
+    "typescript": "^4.5.5"
+  },
+  "peerDependencies": {
+    "astro": "^0.23.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
+		it('example component should be empty', () => {
+			expect(component.html).to.equal('<head></head><body></body>');
+		});
+	});
+});

tsconfig.json

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