Split into houdini and houdini-svelte (#593)

* initial layout

* move runtime

* there are only packages

* start turbo

* start on houdini plugins

* add fsPatch to houdini-svelte

* plugins can modify index files

* move houdini into src

* redlines

* more redlines

* more redlines

* start unifying build tasks

* runtimes aren't bundled

* unify structure more

* build non-standard directories as submodules

* both packages build (with type errors)

* fix imports

* comment out watch-and-run

* start converting to rollup

* go back to esbuild

* import svelte plugin directly

* remove cyclic dependency

* move recursive copy

* start generating typedefs

* fix typescript lib config

* move kit filepath conventions to houdini-svelte

* more kit consolidation

* houdini core typechecks 🎉

* remove flatten fs export

* more fs imports

* clean up deps

* non transform page script related type issues

* houdini-svelte typechecks

* only emit typedefs

* fix more circular imports

* plugins can be imported

* plugins need to be built to be imported

* move codegen out of cmd

* add config to vite adapter

* add typedefs to generated runtime

* runtime generation to svelte plugin

* start on filepath conventions

* fix ciruclar impots

* more ciruclar deps cleared up

* fixed issue in svelte transform

* start on tests

* add houdini/test

* fixed some test type errors

* update package.json

* fix type error from merge

* make fs_patch mix more clear

* consolidate extraction logic

* centralize plugin option config

* svelte runtime can import core

* new line when generating typescript index file

* better newline behavior

* fix parsing erors

* svelte plugin generates stores in plugin_root

* snapshot

* fix relative paths and include fragments

* it all builds 🎉

* remove plugin envar check since its static analysis now

* update package.json

* runtime typedefs

* fix setSession exports

* fix some more imports

* remove extensions

* fix timing issue with the fs patch

* everything but preview layouts

* fix preview errors

* rename integration tests as end-to-end

* example builds

* update example

* update pnpm lock file

* rename houdini-svelte to houdini-plugin-svelte

* fix imports in e2e tests

* fix imports in tests

* update vite setup imports

* more test fixes

* add root deps

* fix includeFile call

* update versions

* add root deps

* tests run

* add pkg commands

* build command now compiles and generates typedefs

* use turbo publish pipeline when publishing changeset

* remove artifact snapshot with normal inline extension

* houdini-svelte tests need to run through full pipeline

* and then there was one

* there isn't a single version any more to welcome users to :(

* fix siteURL references

* fix imports

* add lint

* remove svelte-kit sync

* move some dev deps to deps in sit

* update pnpm lock

* only compile for tests

* build before e2e tests

* build e2e

* add type reference

* triple slash -> import

* fix adapter location

* add reference back

* local def for runtime

* turn off  @typescript-eslint/no-namespace

* fix typedef for plugins

* fix relative imports in generate typedefs

* remove more lint rules

* remove framework from config

* plugin config embedded in config file

* can't use framework config to identify v16

* use external watch and run

* remove conflicting type

* fix framework passed to unit tests

* convert playwright config to js

* refresh lock file

* integration tests run locally

* centralize config file logic in runtime

* move svelte specific config to svelte plugin

* update configs in exaple and e2e tests

* remove unused file

* fix quiet errors check

* update tests

* add 0.17.0 release notes

* add houdini-svelte as a depencey in init

* update setting-up guide

* fix package descriptions

* move changelog

* use correct package.json version

* revert pnpm-lock

* fix component query docs

* +layout.gql (#601)

* 🚸 IMPROVE: integration tests with layout ideas

* 🚧 UPDATE: types generated

* 🚧 UPDATE: layout_query_path

* 🚧 UPDATE: tmp while no Lyaout_User

* ✅ DOC: update

* ✨ NEW: +page & +layout

* ✅ NEW: tests

* ✏️ DOC: one line doc

* ✏️ UPDATE: changeset

* ✅ NEW: eae test

* 🚸 IMPROVE: display the correct file that has an issue (including +page|+layout)

* add changeset

* move generate command to its own file

* remove deprecated cli args

* always export package.json

* update release notes to use the new setSession

* start trasnform_runtime api

* consolidate runtime transforms

* fix path of cjs runtime

* update docs

* more doc updates

Co-authored-by: JYC <[email protected]>

.changeset/proud-hairs-trade.md

@@ -0,0 +1,5 @@
+---
+'houdini-svelte': patch
+---
+
+Adding layout.gql special file

.changeset/wild-coats-hang.md

@@ -0,0 +1,6 @@
+---
+'houdini': minor
+'houdini-svelte': minor
+---
+
+Split houdini into two packages: `houdini` and `houdini-svelte`

.eslintrc.cjs

@@ -2,6 +2,9 @@ module.exports = {
 	root: true,
 	extends: '@theguild',
 	rules: {
+		'@typescript-eslint/triple-slash-reference': 'off',
+		'@typescript-eslint/no-empty-interface': 'off',
+		'@typescript-eslint/no-namespace': 'off',
 		'@typescript-eslint/no-unused-vars': 'off',
 		'@typescript-eslint/ban-ts-comment': 'off',
 		'@typescript-eslint/no-non-null-assertion': 'off',
@@ -28,7 +31,7 @@ module.exports = {
 		'object-shorthand': 'off',
 		// 'no-console': ['error', { allow: ['info', 'warn', 'error', 'time', 'timeEnd'] }],
 	},
-	ignorePatterns: ['integration', 'example', 'site'],
+	ignorePatterns: ['e2e', 'example', 'site'],
 	parserOptions: {
 		sourceType: 'module',
 		ecmaVersion: 2020,

.github/workflows/tests.yml

@@ -81,13 +81,13 @@ jobs:
               run: pnpm install
 
             - name: Build packages
-              run: pnpm run build
+              run: pnpm run compile
 
             - name: Tests
               run: pnpm run tests
 
-    integration:
-        name: Integration Tests
+    e2e_sveltekit:
+        name: End-to-End Tests
         runs-on: ubuntu-latest
 
         steps:
@@ -132,17 +132,14 @@ jobs:
                   key: cache-playwright-linux-1.25.0
 
             - name: Build packages
-              run: pnpm run build
+              run: pnpm run compile
 
             - name: Install Playwright
               if: steps.playwright-cache.outputs.cache-hit != 'true'
               run: npx playwright install --with-deps
 
-            - name: SvelteKit Sync
-              run: cd integration && npx svelte-kit sync
-
-            - name: Integration Tests
-              run: pnpm --filter integration tests
+            - name: End-to-End Tests sveltekit
+              run: pnpm run --filter sveltekit build && pnpm --filter sveltekit tests
               env:
                   RECORD_REPLAY_TEST_RUN_ID: ${{ env.GITHUB_SHA }}
 
@@ -153,8 +150,8 @@ jobs:
                   api-key: ${{ secrets.RECORD_REPLAY_API_KEY }}
                   filter: ${{ 'function($v) { $v.metadata.test.result = "failed" and $v.status = "onDisk" }' }}
 
-    integration_linter:
-        name: Integration Linter
+    e2e_sveltekit_linter:
+        name: End-to-End Linter
         runs-on: ubuntu-latest
 
         steps:
@@ -193,15 +190,12 @@ jobs:
             - name: Build Package
               run: pnpm run build
 
-            - name: SvelteKit Sync
-              run: cd integration && npx svelte-kit sync
-
             - name: Build kit assets
-              run: pnpm --filter integration run build
+              run: pnpm --filter sveltekit run build
 
             # needs to run after build & houdini generate
-            - name: Integration lint
-              run: pnpm --filter integration run lint
+            - name: End-to-End lint
+              run: pnpm --filter sveltekit run lint
 
-            - name: Integration check
-              run: pnpm --filter integration run check
+            - name: End-to-End check
+              run: pnpm --filter sveltekit run check

.gitignore

@@ -1,8 +1,9 @@
 node_modules
+
 .DS_Store
 .vscode
 
-build
+packages/*/build
 bin
 
 .pnp.*
@@ -12,4 +13,9 @@ example/.svelte-kit
 example/functions
 example/$houdini
 
-/playground.js
+/playground.js
+
+.turbo
+build/**
+dist/**
+.next/**

.graphqlrc.yaml

@@ -2,8 +2,8 @@ projects:
     default:
         # 👇 For vscode-graphql and intellisense
         schema:
-            - integration/api/*.graphql
-            - integration/$houdini/graphql/schema.graphql
+            - e2e/api/*.graphql
+            - e2e/$houdini/graphql/schema.graphql
         documents:
-            - integration/src/**/*.gql
-            - integration/$houdini/graphql/documents.gql
+            - e2e/src/**/*.gql
+            - e2e/$houdini/graphql/documents.gql

.npmrc

@@ -0,0 +1,3 @@
+auto-install-peers=true
+strict-peer-dependencies=false
+

.prettierignore

@@ -1,3 +1,4 @@
 **/build/**
 README.md
-.github/**
+.github/**
+packages/*/package.json

e2e/sveltekit/README.md

@@ -0,0 +1 @@
+# Houdini End-to-End

integration/houdini.config.js → e2e/sveltekit/houdini.config.js

@@ -1,6 +1,7 @@
+/// <references types="houdini-svelte">
+
 /** @type {import('houdini').ConfigFile} */
 const config = {
-  client: './src/lib/graphql/houdiniClient',
   schemaPath: './api/*.graphql',
   defaultCachePolicy: 'CacheOrNetwork',
   defaultPartial: true,
@@ -16,6 +17,11 @@ const config = {
         return val.getTime();
       }
     }
+  },
+  plugins: {
+    'houdini-svelte': {
+      client: './src/lib/graphql/houdiniClient'
+    }
   }
 };
 

integration/package.json → e2e/sveltekit/package.json

@@ -1,26 +1,28 @@
 {
-  "name": "integration",
+  "name": "sveltekit",
   "version": "0.0.1",
   "private": true,
+  "type": "module",
   "scripts": {
-    "web": "cross-env TZ=utc vite dev",
+    "web": "cross-env TZ=utc vite dev --host 0.0.0.0",
     "api": "cross-env TZ=utc node api/server.mjs",
     "dev": "concurrently \"pnpm run web\" \"pnpm run api\" -n \"web,api\" -c \"green,magenta\"",
     "build": "vite build",
     "package": "svelte-kit package",
     "previewWeb": "cross-env TZ=utc vite preview --port 3007",
     "preview": "concurrently \"pnpm run previewWeb\" \"pnpm run api\" -n \"web,api\" -c \"green,magenta\"",
     "tests": "playwright test ",
+    "test": "npm run tests",
     "check": "svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
+    "check:watch": "pnpm run check -- --watch",
     "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
     "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
   },
   "devDependencies": {
     "@playwright/test": "1.25.0",
     "@replayio/playwright": "0.2.23",
     "@sveltejs/adapter-auto": "1.0.0-next.66",
-    "@sveltejs/kit": "1.0.0-next.481",
+    "@sveltejs/kit": "1.0.0-next.510",
     "@typescript-eslint/eslint-plugin": "^5.10.1",
     "@typescript-eslint/parser": "^5.10.1",
     "concurrently": "7.1.0",
@@ -30,6 +32,7 @@
     "eslint-plugin-svelte3": "^4.0.0",
     "graphql": "^15.5.0",
     "houdini": "workspace:^",
+    "houdini-svelte": "workspace:^",
     "prettier": "^2.5.1",
     "prettier-plugin-svelte": "^2.5.0",
     "svelte": "^3.47.0",
@@ -40,12 +43,12 @@
     "vite": "^3.1.0"
   },
   "dependencies": {
-    "@graphql-yoga/node": "^2.8.0",
+    "@graphql-yoga/node": "^2.13.13",
+    "@kitql/helper": "^0.5.0",
     "graphql-relay": "^0.10.0",
     "graphql-tag": "^2.12.6",
     "graphql-ws": "^5.8.2",
     "mdsvex": "^0.10.5",
     "ws": "^8.8.1"
-  },
-  "type": "module"
+  }
 }

integration/playwright.config.ts → e2e/sveltekit/playwright.config.ts

@@ -7,13 +7,13 @@ const with_replayio = false;
 const use = with_replayio
   ? {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      ...(replayDevices['Replay Chromium'] as any),
+      ...replayDevices['Replay Chromium'],
       screenshot: 'only-on-failure'
     }
   : { screenshot: 'only-on-failure' };
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const reporter: any[] = [['list']];
+const reporter = [['list']];
 if (process.env.CI) {
   reporter.push(['html', { open: 'never' }]);
   reporter.push(['github']);
@@ -22,7 +22,7 @@ if (with_replayio) {
   reporter.push(['@replayio/playwright/reporter']);
 }
 
-const config: PlaywrightTestConfig = {
+const config = {
   // retries: 2,
   workers: 5,
   reporter,

integration/src/hooks.server.ts → e2e/sveltekit/src/hooks.server.ts

@@ -1,9 +1,9 @@
-import houdini from './lib/graphql/houdiniClient';
+import { setSession } from '$houdini';
 import type { Handle } from '@sveltejs/kit';
 
 export const handle: Handle = async ({ event, resolve }) => {
   // set the session information for this event
-  houdini.setSession(event, { user: { token: '1234-Houdini-Token-5678' } });
+  setSession(event, { user: { token: '1234-Houdini-Token-5678' } });
 
   // pass the event onto the default handle
   return await resolve(event);

integration/src/lib/utils/routes.ts → e2e/sveltekit/src/lib/utils/routes.ts

@@ -2,6 +2,9 @@ export const routes = {
   Home: '/',
   GraphQL: 'http://localhost:4000/graphql',
 
+  // features
+  Query_param: '/query-param',
+
   Stores_SSR: '/stores/ssr',
   Stores_Network: '/stores/network',
   Stores_SSR_UserId_2: '/stores/ssr-2',

integration/src/routes/+layout.svelte → e2e/sveltekit/src/routes/+layout.svelte

@@ -2,7 +2,7 @@
   import { browser } from '$app/environment';
   import { graphql } from '$houdini';
   import cache from '$houdini/runtime/cache';
-  import { routes } from '$lib/utils/routes';
+  import { routes } from '$lib/utils/routes.js';
 
   if (browser) {
     // @ts-ignore
@@ -33,5 +33,5 @@
 </nav>
 
 <div id="layout-session">
-  {$info.data.session}
+  {$info.data?.session}
 </div>

e2e/sveltekit/src/routes/query-param/+error.svelte

@@ -0,0 +1,12 @@
+<script>
+  import { goto } from '$app/navigation';
+  import { onMount } from 'svelte';
+
+  onMount(() => {
+    goto('/');
+  });
+</script>
+
+<!-- <h1>{$page.status}: {$page.error.message}</h1> -->
+
+User Not found...

e2e/sveltekit/src/routes/query-param/+page.server.ts

@@ -0,0 +1,10 @@
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async (event) => {
+  if (event.url.pathname.endsWith('query-param')) {
+    // fallback to user 2... because why not?
+    throw redirect(307, event.url.pathname + '/user-2');
+  }
+  return {};
+};

e2e/sveltekit/src/routes/query-param/Loading.svelte

@@ -0,0 +1,32 @@
+<!-- <span class="">One eternity later...</span> -->
+
+<span class="gradient element">One eternity later...</span>
+
+<style>
+  .element {
+    width: fit-content;
+    padding-right: 40px;
+  }
+
+  .gradient {
+    animation-duration: 0.8s;
+    animation-fill-mode: forwards;
+    animation-iteration-count: infinite;
+    animation-name: placeHolderShimmer;
+    animation-timing-function: linear;
+    background: #f6f7f8;
+    background: linear-gradient(to right, #fafafa 8%, #f4f4f4 38%, #ff3e00 80%);
+    background-size: 1000px 640px;
+
+    position: relative;
+  }
+
+  @keyframes placeHolderShimmer {
+    0% {
+      background-position: -468px 0;
+    }
+    100% {
+      background-position: 468px 0;
+    }
+  }
+</style>

e2e/sveltekit/src/routes/query-param/UserName.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { fragment, graphql, type UserName } from '$houdini';
+  import Loading from './Loading.svelte';
+
+  // TODO:
+  // And it can be undefined... because : <UserName user={$GQL_Page_User.data?.user} />
+  export let user: UserName | undefined;
+
+  $: data =
+    user &&
+    fragment(
+      user,
+      graphql`
+        fragment UserName on User {
+          name
+        }
+      `
+    );
+</script>
+
+{#if $data}
+  {$data.name}
+{:else}
+  <Loading />
+{/if}

e2e/sveltekit/src/routes/query-param/user-[userId]/+layout.gql

@@ -0,0 +1,6 @@
+query Layout_User($userId: ID!) {
+  user(id: $userId, snapshot: "Page_User", delay: 750) {
+    id
+    ...UserName
+  }
+}