initial

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/config@3.0.2/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.changeset/cyan-cars-explain.md

@@ -0,0 +1,5 @@
+---
+'@vtbag/element-crossing': patch
+---
+
+PRovides the first version of the element crossing

.github/FUNDING.yml

@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+
+github: martrapp

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -0,0 +1,42 @@
+name: "\U0001F41B Bug Report"
+description: Report an issue or possible bug
+labels: []
+assignees: []
+body:
+  - type: markdown
+    attributes:
+      value: |
+        ##  Quick Checklist
+        Thank you for taking the time to file a bug report! Please fill out this form as completely as possible.
+
+        ✅ I am using the **latest version of the Bag of Tricks**
+        ✅ I have searched all issues here to see if this has already been reported 
+  - type: textarea
+    id: bug-description
+    attributes:
+      label: Describe the Bug
+      description: A clear and concise description of what the bug is.
+    validations:
+      required: true
+  - type: textarea
+    id: bug-expectation
+    attributes:
+      label: What's the expected result?
+      description: Describe what you expect to happen.
+    validations:
+      required: true
+  - type: input
+    id: bug-reproduction
+    attributes:
+      label: Link to Minimal Reproducible Example
+      description: '**A minimal reproduction is required** so that others can help debug your issue.'
+      placeholder: 'https://github.com/you/your-minimal-repo'
+    validations:
+      required: true
+  - type: checkboxes
+    id: will-pr
+    attributes:
+      label: Participation
+      options:
+        - label:  I am willing to submit a pull request for this issue.
+          required: false

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,5 @@
+blank_issues_enabled: false
+contact_links:
+  - name: GitHub Discussions
+    url: https://github.com/vtbag/element-crossing/discussions
+    about: Does the issue involve a lot of explanation, or are you not sure how it can be split into actionable tasks? Consider starting a discussion first.

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -0,0 +1,19 @@
+name: "✨ Feature Request"
+description: Want to see new functionalities? Use this link.
+labels: [enhancement]
+assignees: []
+body:
+  - type: textarea
+    id: feature-description
+    attributes:
+      label: Describe the Request
+      description: A clear and concise description of what the new feature should be.
+    validations:
+      required: true
+  - type: checkboxes
+    id: will-pr
+    attributes:
+      label: Participation
+      options:
+        - label:  I am willing to contribute a PR to make this happen.
+          required: false

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,14 @@
+<!-- 🙌 Thanks for contributing to the vtbag packages!  -->
+### Description
+
+ - Summarize your changes in one or two sentences.
+ - Don't forget `npm changeset`
+
+### Tests
+
+- How was this change tested?
+
+
+### Docs & Examples
+
+- Does your change here require changes to the vtbag-website?

.github/dependabot.yml

@@ -0,0 +1,19 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+
+  # Maintain dependencies for GitHub Actions
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "monthly"
+
+  # Maintain dependencies for npm
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "monthly"

.github/workflows/publish.yml

@@ -0,0 +1,34 @@
+name: Publish Package to npmjs
+on:
+  workflow_dispatch:
+    inputs:
+      options:
+        description: 'Publish options'
+        required: true
+        default: '--dry-run'
+        type: choice
+        options:
+          - '--dry-run'
+          - '--provenance --access public'
+          - '--provenance --access public --tag preview'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '18.x'
+          registry-url: 'https://registry.npmjs.org'
+          scope: '@vtbag'
+      - run: npm install -g npm
+      - run: npm ci
+      - run: npm run build
+      - run: npm publish ${OPTIONS}
+        env:
+          OPTIONS: ${{ inputs.options }}
+          NODE_AUTH_TOKEN: ${{ secrets.VTBAG_NPM_TOKEN }}

.github/workflows/release.yml

@@ -0,0 +1,25 @@
+name: Release
+on:
+  push:
+    branches:
+      - main
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  release:
+    if: github.repository == 'vtbag/element-crossing'
+    permissions:
+      contents: write
+      pull-requests: write
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18
+      - run: npm ci
+      - name: Create Release Pull Request
+        uses: changesets/action@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/run-checks.yml

@@ -0,0 +1,35 @@
+name: Run Checks
+
+on:
+  workflow_dispatch:
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version:
+        - '18.x'
+        - '20.x'
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Prepare tests
+        run: npx playwright install --with-deps
+
+      - name: Run tests
+        run: npm test
+
+

.github/workflows/run-tests.yml

@@ -0,0 +1,33 @@
+
+name: Run Tests
+
+on:
+  workflow_dispatch:
+  push:
+    branches: [ main ]
+
+jobs:
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "18"
+          cache: npm
+          cache-dependency-path: ./package-lock.json
+
+      - name: Install dependencies
+        run: npm ci
+      - name: Build
+        run: npm run build
+      - name: Prepare tests
+        run: npx playwright install --with-deps
+
+      - name: Run tests
+        run: npm test
+

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+lib

.prettierrc.cjs

@@ -0,0 +1,9 @@
+/** @type {import("@types/prettier").Options} */
+module.exports = {
+  printWidth: 100,
+  semi: true,
+  singleQuote: true,
+  tabWidth: 2,
+  trailingComma: 'es5',
+  useTabs: true,
+};

CHANGELOG.md

@@ -0,0 +1,7 @@
+# @vtbag/element-crossing
+
+## 0.0.0 - 2024-08-28
+
+### Patch Changes
+
+- 4d89b41: Initial release

README.md

@@ -0,0 +1,16 @@
+# ElementCrossing
+Preserve what matters across document transitions!
+
+![Build Status](https://github.com/vtbag/element-crossing/actions/workflows/run-tests.yml/badge.svg)
+[![npm version](https://img.shields.io/npm/v/@vtbag/element-crossing/latest)](https://www.npmjs.com/package/@vtbag/element-crossing)
+[![NPM Downloads](https://img.shields.io/npm/dw/@vtbag/element-crossing)](https://www.npmjs.com/package/@vtbag/element-crossing)
+
+The @vtbag website can be found at https://vtbag.pages.dev/
+
+## !!! News !!!
+
+## What happened so far:
+
+## What is it?
+
+This library provides a robust solution for maintaining HTML elements and their associated states across cross-document view transitions. It is designed to enhance the user experience by ensuring that important elements and their current states are preserved as users navigate through different pages or documents.

bin/bundle

@@ -0,0 +1,9 @@
+#! /bin/sh
+
+if [ "$1" = "dev" ]; then
+  OPTS="--sourcemap --watch"
+else
+  OPTS="--minify"
+  (cd lib && rm *.js.map) >> /dev/null 2>&1
+fi
+npx esbuild src/index.ts --bundle $OPTS --target=ESnext --outfile=lib/index.js

bin/test

@@ -0,0 +1,3 @@
+#! /bin/sh
+
+echo "see @vtbag/website"

eslint.config.mjs

@@ -0,0 +1,11 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import tseslint from "typescript-eslint";
+
+
+export default [
+  {files: ["src/**/*.{js,mjs,cjs,ts}"]},
+  {languageOptions: { globals: globals.browser }},
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+];

package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@vtbag/element-crossing",
+  "version": "1.0.0",
+  "main": "lib/index.js",
+  "description": "Sites using cross-document view transitions look like SPAs but they still do full page loads on navigation. The element crossing provides a way to preserve DOM elements and data objects across page loads.",
+  "files": [
+    "lib/index.js"
+  ],
+  "scripts": {
+    "dev": "bin/bundle dev",
+    "build": "npm run format; bin/bundle",
+    "format": "prettier --write src | grep -v 'unchanged)$'",
+    "test": "bin/test",
+    "changeset": "changeset",
+    "release": "changeset publish"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vtbag/element-crossing.git"
+  },
+  "keywords": [
+    "view",
+    "transitions",
+    "view transition",
+    "view-transition",
+    "preserve","state",
+    "cross-document",
+    "DOM"
+  ],
+  "author": "vtbag",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/vtbag/element-crossing/issues"
+  },
+  "homepage": "https://vtbag.pages.dev",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/martrapp"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.27.7",
+    "@eslint/js": "^9.9.0",
+    "@types/dom-view-transitions": "^1.0.5",
+    "esbuild": "^0.23.0",
+    "prettier": "^3.3.3",
+    "typescript": "^5.5.4"
+  }
+}