Add basic functionality of url builder

.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/[email protected]/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "public",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

.github/workflows/main.yml

@@ -0,0 +1,17 @@
+name: CI
+on:
+  push:
+    branches:
+      - '**'
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18.7.0
+
+      - run: npm install --frozen-lockfile
+      - run: npm run ci

.github/workflows/publish.yml

@@ -0,0 +1,26 @@
+name: Publish
+on:
+  push:
+    branches:
+      - 'main'
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 18.7.0
+
+      - run: npm install --frozen-lockfile
+      - name: Create Release Pull Request or Publish
+        id: changesets
+        uses: changesets/action@v1
+        with:
+          publish: npm run release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

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

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

.npmignore

@@ -0,0 +1,12 @@
+.changeset
+lib
+scripts
+package-lock.yaml
+tsconfig.json
+.gitignore
+.github
+.changeset
+.prettierrc
+.husky
+playground
+vite.config.ts

.nvmrc

@@ -0,0 +1 @@
+v20

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "arrowParens": "always",
+  "trailingComma": "all",
+  "semi": true,
+  "printWidth": 100,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false,
+  "vueIndentScriptAndStyle": true
+}

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Samuel Reichör
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,63 @@
+<div align="center">
+	<a href="https://npmjs.com/package/vue-craftcms"  align="center">
+		<img src="https://online-images-sr.netlify.app/assets/vue-craftcms.png"  alt="Vue craft sdk banner">
+	</a>
+	<h1 align="center">vue-craftcms</h1>
+  <p align="center">
+    Write Craft CMS queries in vue, like in twig. 🚀🚀
+  </p>
+  <br />
+</div>
+
+<p align="center">
+  <a href="https://npmjs.com/package/vue-craftcms">
+    <img src="https://img.shields.io/npm/v/vue-craftcms/latest.svg?style=flat-square" alt="Vue craft sdk latest version" />
+  </a>
+  <a href="https://npmjs.com/package/vue-craftcms" rel="nofollow">
+    <img src="https://img.shields.io/npm/dt/vue-craftcms.svg?style=flat-square" alt="Vue craft sdk downloads">
+  </a>
+</p>
+
+> [!WARNING]  
+> This npm package is still in production and important features may change.
+
+## Installation
+
+Install `vue-craftcms`
+
+```bash
+npm install -D vue-craftcms
+# yarn add -D vue-craftcms
+```
+
+Register the plugin on your application (usually in main.ts) and add the baseUrl to your craft cms backend
+
+```typescript
+import { CraftSdk } from 'craft-vue-sdk';
+import { createApp } from 'vue';
+import App from './App.vue';
+
+const app = createApp(App);
+
+app.use(CraftSdk, {
+  baseUrl: 'https://backend-craftcms.ddev.site',
+  debug: false,
+  registerComponents: true,
+});
+
+app.mount('#app');
+```
+
+## Further Resources
+
+- [Craft CMS Plugin](https://github.com/samuelreichor/craft-query-api)
+- [Core JS Querybuilder](https://github.com/samuelreichor/js-craftcms-api)
+- [Nuxt Craft](https://github.com/samuelreichor/nuxt-craft)
+
+## Support
+
+- Bugs or Feature Requests? [Submit an issue](/../../issues/new).
+
+## Contributing
+
+Contributions are welcome! <3

lib/components/CraftArea.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+  import type { Config } from '../types';
+  import { inject } from 'vue';
+  const props = defineProps({
+    content: {
+      type: Object,
+      required: true,
+    },
+  });
+
+  const config = inject<Config>('config');
+
+  function getCurrentComponent(component: object) {
+    if (!config || !('components' in config)) {
+      throw new Error('Configuration is missing or invalid.');
+    }
+
+    if (!('type' in component)) {
+      throw new Error('props.content has no key named type');
+    }
+
+    if (typeof component.type !== 'string') {
+      throw new Error('Component type is not a string');
+    }
+
+    const cName = component.type;
+
+    const componentEl = config.components[cName];
+    if (!componentEl) {
+      console.error(`No mapped component found for component type: ${cName}`);
+      return null;
+    }
+
+    return componentEl;
+  }
+</script>
+
+<template>
+  <div v-for="(component, index) in props.content" :key="index">
+    <component :is="getCurrentComponent(component)" v-bind="component" />
+  </div>
+</template>

lib/components/CraftPage.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+  import { provide } from 'vue';
+  import type { Config } from '../types';
+  import type { PropType } from 'vue';
+
+  const props = defineProps({
+    config: {
+      type: Object as PropType<Config>,
+      required: true,
+    },
+    content: {
+      type: Object,
+      required: true,
+    },
+  });
+
+  function getCurrentSectionHandle(): string {
+    if (!props.content) {
+      throw new Error('Content is missing.');
+    }
+
+    if (!('sectionHandle' in props.content)) {
+      throw new Error('props.content has no key named sectionHandle');
+    }
+
+    return props.content.sectionHandle;
+  }
+
+  function getCurrentPage() {
+    const currentSectionHandle = getCurrentSectionHandle();
+    if (!currentSectionHandle) {
+      throw new Error('Invalid section handle.');
+    }
+
+    if (!props.config || !('pages' in props.config)) {
+      throw new Error('Configuration is missing or invalid.');
+    }
+
+    const pageComponent = props.config.pages[currentSectionHandle];
+    if (!pageComponent) {
+      console.error(`No mapped page found for page handle: ${currentSectionHandle}`);
+      return null;
+    }
+
+    return pageComponent;
+  }
+
+  provide('config', props.config);
+</script>
+
+<template>
+  <div>
+    <component :is="getCurrentPage()" v-bind="props.content" />
+  </div>
+</template>

lib/composables/useApi.ts

@@ -0,0 +1,6 @@
+import { inject } from 'vue';
+import type { CraftSdkOptions } from '../types';
+
+export function useCraft(): CraftSdkOptions {
+  return inject<CraftSdkOptions>('CraftSdkOptions')!;
+}

lib/composables/useCraftUrlBuilder.ts

@@ -0,0 +1,22 @@
+import { buildCraftQueryUrl } from 'js-craftcms-api';
+import { useCraft } from './useApi';
+import type { ElementType, ExecutionMethods } from 'js-craftcms-api';
+
+export function useCraftUrlBuilder<T extends ElementType>(elementType: T) {
+  const queryBuilder = buildCraftQueryUrl(elementType);
+  const { baseUrl, debug } = useCraft();
+
+  return {
+    ...queryBuilder,
+
+    buildUrl(execOpt: ExecutionMethods) {
+      const queryUrl = queryBuilder.buildBaseUrl(execOpt);
+      const url = `${baseUrl}${queryUrl}`;
+
+      if (debug) {
+        console.log('The built url is: ' + url);
+      }
+      return url;
+    },
+  };
+}

lib/main.ts

@@ -0,0 +1,29 @@
+import CraftPage from './components/CraftPage.vue';
+import CraftArea from './components/CraftArea.vue';
+import type { App } from 'vue';
+import type { CraftSdkOptions } from './types';
+
+export * from './composables/useCraftUrlBuilder';
+export * from './composables/useApi';
+export * from './types';
+
+export const defaultOptions: CraftSdkOptions = {
+  baseUrl: 'default.com',
+  registerComponents: true,
+  debug: false,
+};
+
+export const CraftSdk = {
+  install(app: App, options: CraftSdkOptions = defaultOptions) {
+    if (options.registerComponents) {
+      app.component('CraftPage', CraftPage);
+      app.component('CraftArea', CraftArea);
+    }
+
+    app.provide('CraftSdkOptions', options);
+
+    if (options.debug) {
+      console.log('Craft SDK Options:', options);
+    }
+  },
+};

lib/types.ts

@@ -0,0 +1,16 @@
+import type { DefineComponent } from 'vue';
+
+export type Config = {
+  pages: {
+    [key: string]: Record<string, DefineComponent>;
+  };
+  components: {
+    [key: string]: Record<string, DefineComponent>;
+  };
+};
+
+export type CraftSdkOptions = {
+  baseUrl: string;
+  registerComponents?: boolean;
+  debug?: boolean;
+};