feat(astro-angular): add props (inputs) processing (#67)

Closes #60

angular.json

@@ -8,6 +8,8 @@
     "astro-angular": "packages/astro-angular",
     "create-analog": "packages/create-analog",
     "docs-app": "apps/docs-app",
-    "vite-plugin-angular": "packages/vite-plugin-angular"
+    "vite-plugin-angular": "packages/vite-plugin-angular",
+    "astro-app": "apps/astro-app",
+    "astro-app-e2e-playwright": "apps/astro-app-e2e-playwright"
   }
 }

apps/astro-app-e2e-playwright/.eslintrc.json

@@ -0,0 +1,17 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["src/plugins/index.js"],
+      "rules": {
+        "@typescript-eslint/no-var-requires": "off",
+        "no-undef": "off"
+      }
+    }
+  ]
+}

apps/astro-app-e2e-playwright/project.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/astro-app-e2e-playwright/src",
+  "projectType": "application",
+  "targets": {
+    "vitest": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "apps/astro-app-e2e-playwright",
+        "commands": ["vitest"]
+      }
+    },
+    "e2e": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "",
+        "command": "start-server-and-test 'nx dev astro-app' 3000 'nx run astro-app-e2e-playwright:vitest'"
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["apps/astro-app-e2e-playwright/**/*.{js,ts}"]
+      }
+    }
+  },
+  "tags": [],
+  "implicitDependencies": ["astro-app"]
+}

apps/astro-app-e2e-playwright/tests/app.spec.ts

@@ -0,0 +1,50 @@
+import { chromium, Browser, Page } from 'playwright';
+import {
+  afterAll,
+  afterEach,
+  beforeAll,
+  beforeEach,
+  expect,
+  test,
+  describe,
+} from 'vitest';
+
+let browser: Browser;
+let page: Page;
+
+beforeAll(async () => {
+  browser = await chromium.launch();
+});
+afterAll(async () => {
+  await browser.close();
+});
+
+beforeEach(async () => {
+  page = await browser.newPage({
+    baseURL: 'http://localhost:3000',
+  });
+  await page.goto('/');
+});
+afterEach(async () => {
+  await page.close();
+});
+
+describe('AstroApp', () => {
+  describe('Given the user has navigated to the home page', () => {
+    test('Then client side rendered CardComponent is rendered', async () => {
+      const componentLocator = page.locator(
+        'astro-island[component-export="CardComponent"]'
+      );
+      await expect(
+        componentLocator.locator('>> text=Angular (Client Side)')
+      ).toContain(/Angular \(Client Side\)/i);
+    });
+
+    test('Then server side rendered CardComponent is rendered', async () => {
+      const componentLocator = page.locator('astro-card');
+      await expect(
+        componentLocator.locator('>> text=Angular (server side binding)')
+      ).toContain(/Angular \(server side binding\)/i);
+    });
+  });
+});

apps/astro-app/.gitignore

@@ -0,0 +1,20 @@
+# build output
+dist/
+.output/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store

apps/astro-app/.npmrc

@@ -0,0 +1,2 @@
+# Expose Astro dependencies for `pnpm` users
+shamefully-hoist=true

apps/astro-app/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

apps/astro-app/.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

apps/astro-app/README.md

@@ -0,0 +1,48 @@
+# Welcome to [Astro](https://astro.build)
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+![basics](https://user-images.githubusercontent.com/4677417/186188965-73453154-fdec-4d6b-9c34-cb35c248ae5b.png)
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```
+/
+├── public/
+│   └── favicon.svg
+├── src/
+│   ├── components/
+│   │   └── Card.astro
+│   ├── layouts/
+│   │   └── Layout.astro
+│   └── pages/
+│       └── index.astro
+└── package.json
+```
+
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+
+Any static assets, like images, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                | Action                                             |
+| :--------------------- | :------------------------------------------------- |
+| `npm install`          | Installs dependencies                              |
+| `npm run dev`          | Starts local dev server at `localhost:3000`        |
+| `npm run build`        | Build your production site to `./dist/`            |
+| `npm run preview`      | Preview your build locally, before deploying       |
+| `npm run astro ...`    | Run CLI commands like `astro add`, `astro preview` |
+| `npm run astro --help` | Get help using the Astro CLI                       |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

apps/astro-app/astro.config.mjs

@@ -0,0 +1,7 @@
+import { defineConfig } from 'astro/config';
+import analogjsAngular from "@analogjs/astro-angular";
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [analogjsAngular()]
+});

apps/astro-app/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@example/basics",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "devDependencies": {
+    "astro": "^1.1.1"
+  }
+}

apps/astro-app/project.json

@@ -0,0 +1,6 @@
+{
+  "projectType": "application",
+  "sourceRoot": "apps/astro-app/src",
+  "targets": {},
+  "tags": []
+}

apps/astro-app/src/components/Card.astro

@@ -0,0 +1,76 @@
+---
+export interface Props {
+	title: string;
+	body: string;
+	href: string;
+}
+
+const { href, title, body } = Astro.props;
+---
+
+<li class="link-card">
+	<a href={href}>
+		<h2>
+			{title}
+			<span>&rarr;</span>
+		</h2>
+		<p>
+			{body}
+		</p>
+	</a>
+</li>
+<style>
+	:root {
+		--link-gradient: linear-gradient(45deg, #4f39fa, #da62c4 30%, var(--color-border) 60%);
+	}
+
+	.link-card {
+		list-style: none;
+		display: flex;
+		padding: 0.15rem;
+		background-image: var(--link-gradient);
+		background-size: 400%;
+		border-radius: 0.5rem;
+		background-position: 100%;
+		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+
+	.link-card > a {
+		width: 100%;
+		text-decoration: none;
+		line-height: 1.4;
+		padding: 1em 1.3em;
+		border-radius: 0.35rem;
+		color: var(--text-color);
+		background-color: white;
+		opacity: 0.8;
+	}
+
+	h2 {
+		margin: 0;
+		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+
+	p {
+		margin-top: 0.75rem;
+		margin-bottom: 0;
+	}
+
+	h2 span {
+		display: inline-block;
+		transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+	}
+
+	.link-card:is(:hover, :focus-within) {
+		background-position: 0;
+	}
+
+	.link-card:is(:hover, :focus-within) h2 {
+		color: #4f39fa;
+	}
+
+	.link-card:is(:hover, :focus-within) h2 span {
+		will-change: transform;
+		transform: translateX(2px);
+	}
+</style>