astro-async-loader 0.0.0 → 0.1.0

package/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Jonas Fröller
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,17 +1,9 @@
-# Astro Component Template 🧑‍🚀
+# Astro Async-Loader
 
-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.
+[![npm](https://badgen.net/badge/icon/npm?icon=npm&label)](https://www.npmjs.com)
+[![total npm downloads](https://badgen.net/npm/dt/astro-async-loader)](https://www.npmjs.com/package/astro-async-loader)
+[![latest npm release](https://img.shields.io/npm/v/astro-async-loader)](https://www.npmjs.com/package/astro-async-loader?activeTab=versions)
+[![npm package license](https://badgen.net/npm/license/astro-async-loader)](https://www.npmjs.com/package/astro-async-loader)
 
 ## Folder Structure
 
@@ -42,34 +34,3 @@ The following npm scripts are provided to lint and format your project:
 | `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/package.json

@@ -1,8 +1,11 @@
 {
   "name": "astro-async-loader",
-  "version": "0.0.0",
+  "version": "0.1.0",
   "description": "Astro components for elements, that load asynchronously, and should have loading indicators.",
-  "repository": "https://github.com/jonasfroeller/astro.async.loader",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jonasfroeller/astro.async.loader.git"
+  },
   "license": "MIT",
   "type": "module",
   "exports": {
@@ -16,25 +19,27 @@
     "astro-component"
   ],
   "scripts": {
-    "test": "mocha --parallel --timeout 15000",
+    "test": "npx playwright test",
     "format": "prettier -w .",
     "lint": "eslint . --ext .ts,.js,.astro src",
     "dev": "cd example && astro dev"
   },
   "devDependencies": {
+    "@playwright/test": "^1.57.0",
     "@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",
+    "@types/node": "^25.0.3",
     "@typescript-eslint/parser": "^8.19.0",
     "astro": "^5.1.2",
-    "chai": "^5.1.2",
+    "astro-component-tester": "^0.8.0",
+    "chai": "^6.2.2",
     "eslint": "^9.17.0",
     "eslint-plugin-astro": "^1.3.1",
     "mocha": "^11.0.1",
+    "playwright": "^1.57.0",
     "prettier": "^3.4.2",
     "prettier-plugin-astro": "^0.14.1",
     "typescript": "^5.7.2"
   }
-}
+}

package/src/AsyncIframe.astro

@@ -1,93 +1,96 @@
-<div class="async-iframe-wrapper">
-  <div class="loader-container">
-    <div class="loader"></div>
+<div class="async-iframe__wrapper">
+  <div class="async-iframe__loader-container">
+    <div class="async-iframe__loader"></div>
   </div>
 
-  <div class="iframe-container">
+  <div class="async-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);
+  function setupIframes() {
+    const wrappers = document.getElementsByClassName('async-iframe__wrapper');
+    
+    for (let i = 0; i < wrappers.length; i++) {
+      const wrapper = wrappers[i];
+      const loaderContainer = wrapper.getElementsByClassName('async-iframe__loader-container')[0];
+      const iframe = wrapper.getElementsByTagName('iframe')[0];
+        
+      if (iframe && loaderContainer) {
+        const handleLoad = () => {
+          loaderContainer.classList.add('async-iframe__hidden');
+          iframe.removeEventListener('load', handleLoad);
+        };
+        
+        iframe.addEventListener('load', handleLoad);
+      }
     }
   }
 
   if (document.readyState === 'loading') {
     const handleDOMContentLoaded = () => {
-      setupIframe();
+      setupIframes();
       document.removeEventListener('DOMContentLoaded', handleDOMContentLoaded);
     };
     
     document.addEventListener('DOMContentLoaded', handleDOMContentLoaded);
   } else {
-    setupIframe();
+    setupIframes();
   }
 </script>
 
 <style>
-  .async-iframe-wrapper {
+  .async-iframe__wrapper {
     position: relative;
     padding-top: 85%;
     height: 0;
     overflow: hidden;
   }
   
-  .loader-container {
+  .async-iframe__loader-container {
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 10;
+    inset: 0;
+    display: grid;
+    place-items: center;
+    z-index: 5;
+    background: rgba(255, 255, 255, 0.9);
   }
 
-  .loader {
+  .async-iframe__loader {
     width: 2rem;
     height: 2rem;
     border-radius: 50%;
     border: 0.125rem solid transparent;
     border-top-color: #3b82f6;
-    animation: spin 1s linear infinite;
+    animation: async-iframe__spin 1s linear infinite;
   }
 
-  @keyframes spin {
+  @keyframes async-iframe__spin {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
   }
 
-  .iframe-container {
+  .async-iframe__container {
     position: absolute;
-    top: 0px;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
+    inset: 0;
   }
 
   :global(iframe) {
     position: absolute;
-    top: 0px;
-    left: 0px;
+    inset: 0;
     width: 100%;
     height: 100%;
-    border: 0px;
+    border: 0;
+    opacity: 0;
+    transition: opacity 0.3s ease-in-out;
   }
 
-  .hidden {
+  .async-iframe__hidden {
     display: none !important;
   }
+
+  .async-iframe__hidden + .async-iframe__container :global(iframe) {
+    opacity: 1;
+  }
 </style>