astro-async-loader 0.0.0

package/README.md

@@ -0,0 +1,75 @@
+# 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
+- Use a example folder to help previewing the Component without npm link
+
+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
+├── example/                    # Preview Your component here
+├── 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                                |
+| `npm run dev`    | Run dev inside example project                                |
+
+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)).

package/index.ts

@@ -0,0 +1,3 @@
+import AstroAsyncIframe from './src/AsyncIframe.astro';
+
+export { AstroAsyncIframe };

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "astro-async-loader",
+  "version": "0.0.0",
+  "description": "Astro components for elements, that load asynchronously, and should have loading indicators.",
+  "repository": "https://github.com/jonasfroeller/astro.async.loader",
+  "license": "MIT",
+  "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,.astro src",
+    "dev": "cd example && astro dev"
+  },
+  "devDependencies": {
+    "@types/chai": "^5.0.1",
+    "@types/eslint": "^9.6.1",
+    "@types/mocha": "^10.0.10",
+    "@types/node": "^22.10.5",
+    "@types/prettier": "^3.0.0",
+    "@typescript-eslint/parser": "^8.19.0",
+    "astro": "^5.1.2",
+    "chai": "^5.1.2",
+    "eslint": "^9.17.0",
+    "eslint-plugin-astro": "^1.3.1",
+    "mocha": "^11.0.1",
+    "prettier": "^3.4.2",
+    "prettier-plugin-astro": "^0.14.1",
+    "typescript": "^5.7.2"
+  }
+}

package/src/AsyncIframe.astro

@@ -0,0 +1,93 @@
+<div class="async-iframe-wrapper">
+  <div class="loader-container">
+    <div class="loader"></div>
+  </div>
+
+  <div class="iframe-container">
+    <slot />
+  </div>
+</div>
+
+<script>
+  function setupIframe() {
+    const wrapper = document.getElementsByClassName('async-iframe-wrapper')[0];
+    const loaderContainer = wrapper.getElementsByClassName('loader-container')[0];
+    const iframe = wrapper.querySelector('iframe');
+      
+    if (iframe && loaderContainer) {
+      const handleLoad = () => {
+        loaderContainer.classList.add('hidden');
+        iframe.removeEventListener('load', handleLoad);
+      };
+      
+      iframe.addEventListener('load', handleLoad);
+    }
+  }
+
+  if (document.readyState === 'loading') {
+    const handleDOMContentLoaded = () => {
+      setupIframe();
+      document.removeEventListener('DOMContentLoaded', handleDOMContentLoaded);
+    };
+    
+    document.addEventListener('DOMContentLoaded', handleDOMContentLoaded);
+  } else {
+    setupIframe();
+  }
+</script>
+
+<style>
+  .async-iframe-wrapper {
+    position: relative;
+    padding-top: 85%;
+    height: 0;
+    overflow: hidden;
+  }
+  
+  .loader-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+  }
+
+  .loader {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    border: 0.125rem solid transparent;
+    border-top-color: #3b82f6;
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  .iframe-container {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+  }
+
+  :global(iframe) {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    border: 0px;
+  }
+
+  .hidden {
+    display: none !important;
+  }
+</style>

package/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />