feat: initial implementation

.editorconfig

@@ -0,0 +1,16 @@
+root = true
+
+[*]
+indent_style = tab
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.yml]
+indent_style = space
+indent_size = 2

.eslintignore

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

.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+	root: true,
+	extends: ["./node_modules/@limbo-works/lint-configs/.eslintrc.simple.cjs"],
+};

.github/workflows/release-please.yml

@@ -0,0 +1,40 @@
+name: Release Please and Publish
+
+on:
+    push:
+        branches:
+            - main
+
+permissions:
+    contents: write
+    pull-requests: write
+    packages: write
+
+jobs:
+    release-please:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: google-github-actions/release-please-action@v4
+              id: release
+              with:
+                  token: ${{ secrets.GITHUB_TOKEN }}
+                  release-type: node
+
+            - uses: actions/checkout@v4
+              if: ${{ steps.release.outputs.release_created }}
+
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: 20
+                  registry-url: https://npm.pkg.github.com/
+              if: ${{ steps.release.outputs.release_created }}
+
+            - run: yarn
+              env:
+                  NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+              if: ${{ steps.release.outputs.release_created }}
+
+            - run: yarn publish
+              env:
+                  NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+              if: ${{ steps.release.outputs.release_created }}

.gitignore

@@ -0,0 +1,56 @@
+# Dependencies
+node_modules
+
+# Logs
+*.log*
+
+# Temp directories
+.temp
+.tmp
+.cache
+
+# Yarn
+**/.yarn/cache
+**/.yarn/*state*
+
+# Generated dirs
+dist
+
+# Nuxt
+.nuxt
+.output
+.data
+.vercel_build_output
+.build-*
+.netlify
+
+# Env
+.env
+
+# Testing
+reports
+coverage
+*.lcov
+.nyc_output
+
+# VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/*.code-snippets
+
+# Intellij idea
+*.iml
+.idea
+
+# OSX
+.DS_Store
+.AppleDouble
+.LSOverride
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk

.npmrc

@@ -0,0 +1,4 @@
+@limbo-works:registry=https://npm.pkg.github.com
+
+shamefully-hoist=true
+strict-peer-dependencies=false

.nvmrc

@@ -0,0 +1 @@
+lts/iron

.playground/app.vue

@@ -0,0 +1,34 @@
+<template>
+	<main>
+		<NuxtPage />
+	</main>
+</template>
+
+<style lang="postcss">
+body {
+	padding: 64px;
+}
+
+main {
+	max-width: 800px;
+	margin: 0 auto;
+}
+
+.list {
+	display: flex;
+	flex-direction: column;
+	row-gap: 32px;
+}
+
+.preview {
+	padding: 24px 48px 36px 48px;
+	background-color: rgb(240, 240, 240);
+	max-height: 400px;
+	overflow: auto;
+}
+
+button a {
+	color: inherit;
+	text-decoration: none;
+}
+</style>

.playground/components/PreviewCard.vue

@@ -0,0 +1,52 @@
+<template>
+	<div class="c-preview-card">
+		<button v-if="to?.length">
+			<NuxtLink class="c-preview-card__expand" :to="to">
+				View Single
+			</NuxtLink>
+		</button>
+
+		<div class="c-preview-card__content">
+			<pre v-text="data"></pre>
+		</div>
+	</div>
+</template>
+
+<script setup>
+defineProps({
+	data: {
+		type: [String, Object],
+		required: true,
+	},
+
+	to: {
+		type: String,
+		required: false,
+	},
+});
+</script>
+
+<style lang="postcss">
+.c-preview-card {
+	position: relative;
+	background-color: rgb(240, 240, 240);
+	max-height: 400px;
+	width: 100%;
+	padding: 24px 48px 36px 48px;
+	overflow: auto;
+}
+
+.c-preview-card button {
+	opacity: 0;
+
+	display: block;
+	position: sticky;
+	margin-left: auto;
+	top: 24px;
+	right: 24px;
+}
+
+.c-preview-card:hover button {
+	opacity: 1;
+}
+</style>

.playground/nuxt.config.js

@@ -0,0 +1,9 @@
+export default defineNuxtConfig({
+	modules: ['../src/module'],
+	devtools: { enabled: true },
+
+	shopify: {
+		shop: 'limbo-example',
+		token: '8d0648d7c9387bf18db775a414856630',
+	},
+});

.playground/package.json

@@ -0,0 +1,13 @@
+{
+  "private": true,
+  "name": "nuxt-shopify-playground",
+  "type": "module",
+  "scripts": {
+    "dev": "nuxi dev",
+    "build": "nuxi build",
+    "generate": "nuxi generate"
+  },
+  "devDependencies": {
+    "nuxt": "latest"
+  }
+}

.playground/pages/articles/[id].vue

@@ -0,0 +1,14 @@
+<template>
+	<div class="list">
+		<pre v-text="data"></pre>
+	</div>
+</template>
+
+<script setup>
+const shopify = useShopify();
+const id = useRoute().params.id;
+
+const { data } = await useAsyncData(async () => {
+	return await shopify.articles.getById(id);
+});
+</script>

.playground/pages/articles/index.vue

@@ -0,0 +1,40 @@
+<template>
+	<div class="list">
+		<PreviewCard
+			v-for="(article, index) in articles"
+			:key="index"
+			:data="article"
+			:to="`/articles/${encodeURIComponent(article.id)}`"
+		/>
+
+		<div style="margin: 0 auto">
+			<button v-if="hasNextPage" @click="fetchMore">Load more</button>
+		</div>
+	</div>
+</template>
+
+<script setup>
+const shopify = useShopify();
+const limit = ref(1);
+
+const { data } = await useAsyncData(async () => {
+	return await shopify.articles.get({
+		first: limit.value,
+	});
+});
+
+const endCursor = ref(data.value.info?.endCursor);
+const hasNextPage = ref(data.value.info?.hasNextPage);
+const articles = ref(data.value.articles);
+
+async function fetchMore() {
+	const data = await shopify.articles.get({
+		first: limit.value,
+		after: endCursor.value,
+	});
+
+	endCursor.value = data.info?.endCursor;
+	hasNextPage.value = data.info?.hasNextPage;
+	articles.value = articles.value.concat(data.articles);
+}
+</script>

.playground/pages/blogs/[id].vue

@@ -0,0 +1,14 @@
+<template>
+	<div class="list">
+		<pre v-text="data"></pre>
+	</div>
+</template>
+
+<script setup>
+const shopify = useShopify();
+const id = useRoute().params.id;
+
+const { data } = await useAsyncData(async () => {
+	return await shopify.blogs.getById(id);
+});
+</script>

.playground/pages/blogs/index.vue

@@ -0,0 +1,40 @@
+<template>
+	<div class="list">
+		<PreviewCard
+			v-for="(blog, index) in blogs"
+			:key="index"
+			:data="blog"
+			:to="`/blogs/${encodeURIComponent(blog.id)}`"
+		/>
+
+		<div style="margin: 0 auto">
+			<button v-if="hasNextPage" @click="fetchMore">Load more</button>
+		</div>
+	</div>
+</template>
+
+<script setup>
+const shopify = useShopify();
+const limit = ref(1);
+
+const { data } = await useAsyncData(async () => {
+	return await shopify.blogs.get({
+		limit: limit.value,
+	});
+});
+
+const endCursor = ref(data.value.info?.endCursor);
+const hasNextPage = ref(data.value.info?.hasNextPage);
+const blogs = ref(data.value.blogs);
+
+async function fetchMore() {
+	const data = await shopify.blogs.get({
+		limit: limit.value,
+		after: endCursor.value,
+	});
+
+	endCursor.value = data.info?.endCursor;
+	hasNextPage.value = data.info?.hasNextPage;
+	blogs.value = pages.value.concat(data.blogs);
+}
+</script>