open-index/open-npm huggingface dataset:
npm package: @mizchi/qwik-svelte
Description: Render svelte component on qwik
Latest version: 0.1.8

# @mizchi/qwik-svelte

Qwikify svelte components on qwik.

```bash
$ npm install @mizchi/qwik-svelte @sveltejs/vite-plugin-svelte svelte svelte-preprocess -D
```

**CAUTION** - This is PoC phase. You should check it works on your app.

## How to use

### vite.config.ts

Setup svelte ssr with `@sveltejs/vite-plugin-svelte`.

```ts
import { defineConfig } from "vite";
import { qwikVite } from "@builder.io/qwik/optimizer";
import sveltePreprocess from "svelte-preprocess";
import { svelte } from "@sveltejs/vite-plugin-svelte";

export default defineConfig((options) => {
  return {
    plugins: [
      // with ssr config
      svelte({
        preprocess: sveltePreprocess(),
        compilerOptions: {
          generate: options.mode === "ssr" ? "ssr" : "dom",
          hydratable: true,
        },
      }),
      qwikVite()
    ],
  };
});
```

(To use `@sveltejs/vite-plugin-svelte`, you may need `"type": "module"` in `package.json`)

### Use svelte components

```svelte
<!-- src/components/App.svelte -->
<script lang="ts">
  export let name: string;
  let count = 0;
</script>

<div class="app">
  <h1>Hello {name}!</h1>
  <button on:click={() => count++}>{count}</button>
</div>

<style>
  h1 {
    color: blue;
  }
</style>
```

Render with `qwikifySvelte$`

```tsx
import App from "./components/App.svelte";
import { qwikifySvelte$ } from "@mizchi/qwik-svelte";

const QApp = qwikifySvelte$<{name: string}>(App, {
  eagerness: 'load',
});

export default () => {
  return <QApp name="svelte"/>;
};
```

---

# How to contribute

## develop

```bash
# clone
$ pnpm install
$ pnpm dev # check for src/root.tsx
$ pnpm build # emit lib files
```

## TODO

- [ ] unit testing
- [ ] `<Slot>`
- [ ] Check re-render with props change
- [ ] Props types for svelte component

## My motivation

Looking at [qwik-react](https://github.com/BuilderIO/qwik/tree/main/packages/qwik-react), I felt that qwik could be treated as a meta-framework that could replace astro. qwik itself would be kept to the core for describing the critical path, calling the runtime when hydration occurs.

Therefore, I first tried targeting svelte, which is not JSX.

## LICENSE

MIT
npm package: @mizchi/qwik-vue
Description: Render vue component on qwik
Latest version: 0.1.4

# @mizchi/qwik-vue

Qwikify vue components on qwik.

```bash
$ npm install @mizchi/qwik-vue @vitejs/plugin-vue vue -D
```

**CAUTION** - This is PoC phase. You should check it works on your app.

## How to use

### vite.config.ts

```ts
import { defineConfig } from "vite";
import { qwikVite } from "@builder.io/qwik/optimizer";
import vue from "@vitejs/plugin-vue";

export default defineConfig(() => {
  return {
    plugins: [
      vue(),
      qwikVite()
    ],
  };
});
```

### Use vue components

```vue
<!-- src/components/App.vue -->
<script setup>
import { ref, defineProps } from 'vue';
const props = defineProps(["counter"]);
const count = ref(0);
</script>

<template>
  <div>{{props.counter}}</div>
  <button @click="count++">You clicked me {{ count }} times.</button>
</template>
```

Render with `qwikifyVue$`

```tsx
import { component$ } from "@builder.io/qwik";
import App from "./components/App.vue";
import { qwikifyVue$ } from "@mizchi/qwik-vue";
const QApp = qwikifyVue$<{counter: number}>(App, {
  eagerness: 'load',
});
export default component$(() => {
  return <QApp counter={0} />;
});
```

---

# How to contribute

## develop

```bash
# clone
$ pnpm install
$ pnpm dev # check for src/root.tsx
$ pnpm build # emit lib files
```

## TODO

- [ ] unit testing
- [ ] `<Slot>`
- [ ] Props types for vue component

## LICENSE

MIT