Nuxt3 compatibilty build

.all-contributorsrc

@@ -58,6 +58,24 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "JoaoPedroAS51",
+      "name": "João Pedro Antunes Silva",
+      "avatar_url": "https://avatars.githubusercontent.com/u/15177236?v=4",
+      "profile": "https://joaopedroas.com",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "czepter",
+      "name": "Christian Zepter",
+      "avatar_url": "https://avatars.githubusercontent.com/u/34108004?v=4",
+      "profile": "https://czepter.de",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.editorconfig

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

.gitignore

@@ -1,4 +1,3 @@
 .nuxt/
 coverage/
 node_modules/
-dist/

README.md

@@ -25,7 +25,9 @@ $ yarn add @nuxtjs/dayjs # or npm install
 ### 1. Register dayjs module to your Nuxt Application
 
 ```js
-export default {
+import { defineNuxtConfig } from 'nuxt'
+
+export default defineNuxtConfig({
   // ...
   modules: [
     '@nuxtjs/dayjs'
@@ -42,30 +44,32 @@ export default {
     ] // Your Day.js plugin
   }
   // ...
-}
+})
 ```
 
-### 2. Use $dayjs on Context, Vue instance
+### 2. Use $dayjs
 
-with Context
+Composition API
 
 ```html
-<script>
-export default {
-  asyncData({ $dayjs }) {
-    return {
-      now: $dayjs().format('YYYY/MM/DD')
-    }
-  }
-}
+<script lang="ts" setup>
+const dayjs = useDayjs()
+dayjs().format('YYYY/MM/DD')
+
+// Or
+
+const { $dayjs } = useNuxtApp()
+$dayjs().format('YYYY/MM/DD')
 </script>
 ```
 
-with Vue instance
+Options API
 
 ```html
-<script>
-export default {
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
   data() {
     return {
       latestClicked: null
@@ -76,37 +80,14 @@ export default {
       this.latestClicked = this.$dayjs().format('YYYY/MM/DD')
     }
   }
-}
+})
 </script>
 ```
 
-### For Typescript users
-
-Add the types to your `"types"` array in `tsconfig.json` after the `@nuxt/types` entry.
-
-For dayjs plugins, add their relative types like `dayjs/plugin/_pluginName_`.
-
-#### tsconfig.json
-
-```json
-{
-  "compilerOptions": {
-    "types": [
-      "@nuxt/types",
-      "@nuxtjs/dayjs",
-      "dayjs/plugin/relativeTime",
-    ]
-  }
-}
-```
-
 ## Development
 
-```bash
-$ git clone https://github.com/nuxt-community/dayjs-module.git
-$ cd @nuxtjs/dayjs
-$ yarn
-```
+- Run `npm run dev:prepare` to generate type stubs.
+- Use `npm run dev` to start [playground](./playground) in development mode.
 
 ## License
 

dist/module.cjs

@@ -0,0 +1,5 @@
+module.exports = function(...args) {
+  return import('./module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)

dist/module.d.ts

@@ -0,0 +1,11 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+interface ModuleOptions {
+    locales: string[];
+    defaultLocale: string | null;
+    plugins: string[];
+    defaultTimeZone: string | null;
+}
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions>;
+
+export { ModuleOptions, _default as default };

dist/module.json

@@ -0,0 +1,5 @@
+{
+  "name": "@nuxtjs/dayjs",
+  "version": "3.0.0",
+  "configKey": "dayjs"
+}

dist/module.mjs

@@ -0,0 +1,113 @@
+import { useLogger, defineNuxtModule, isNuxt2, isNuxt3, getNuxtVersion, createResolver, addPlugin, addTemplate, addImports } from '@nuxt/kit';
+
+const name = "@nuxtjs/dayjs";
+const version = "3.0.0";
+
+const generateConfigContents = ({
+  plugins,
+  defaultLocale,
+  locales,
+  defaultTimeZone
+}) => {
+  const shouldSetDefaultLocale = !!defaultLocale;
+  const shouldSetDefaultTimeZone = !!defaultTimeZone;
+  const shouldImportDayJs = !!plugins.length || shouldSetDefaultLocale || shouldSetDefaultTimeZone;
+  return `// Generated by @nuxtjs/dayjs
+    ${shouldImportDayJs ? "import dayjs from 'dayjs'" : ""}
+
+    ${locales.map((l) => `import 'dayjs/locale/${l}.js'`).join("\n")}
+    ${shouldSetDefaultLocale ? `dayjs.locale('${defaultLocale}')` : ""}
+
+    ${plugins.map((p) => {
+    const _p = renamePlugin(p);
+    return `import ${_p} from 'dayjs/plugin/${p}.js' 
+dayjs.extend(${_p})`;
+  }).join("\n")}
+    ${shouldSetDefaultTimeZone ? `dayjs.tz.setDefault('${defaultTimeZone}')` : ""}
+`;
+};
+function renamePlugin(plugin) {
+  return plugin.replace(/[^A-Za-z]/g, "_");
+}
+
+const formatLogMessage = (message) => `[nuxt:dayjs] ${message}`;
+const logger = useLogger("nuxt:dayjs");
+
+const validateModuleOptions = (options) => {
+  return [
+    validateLocales(options),
+    validateTimeZone(options)
+  ].every(Boolean);
+};
+const validateLocales = ({ defaultLocale, locales }) => {
+  if (defaultLocale && defaultLocale !== "en" && !locales.includes(defaultLocale)) {
+    logger.error('`defaultLocale` must be either `"en"` or one defined in `locales` option');
+    return false;
+  }
+  return true;
+};
+const validateTimeZone = ({ defaultTimeZone, plugins }) => {
+  if (defaultTimeZone && !!plugins.length) {
+    const timeZonePluginIndex = plugins.findIndex((p) => p === "timezone" || p === "timezone.js");
+    if (timeZonePluginIndex === -1) {
+      logger.error("Timezone plugin must be set in `plugins` option when `defaultTimeZone` option is set");
+      return false;
+    }
+    const utcPluginIndex = plugins.findIndex((p) => p === "utc" || p === "utc.js");
+    if (utcPluginIndex === -1 || utcPluginIndex > timeZonePluginIndex) {
+      logger.error("UTC plugin must be set before Timezone plugin in `plugins` option");
+      return false;
+    }
+  }
+  return true;
+};
+
+const module = defineNuxtModule({
+  meta: {
+    name,
+    version,
+    configKey: "dayjs"
+  },
+  defaults: {
+    locales: [],
+    defaultLocale: null,
+    plugins: [],
+    defaultTimeZone: null
+  },
+  setup(options, nuxt) {
+    if (!isNuxt2() && !isNuxt3()) {
+      throw new Error(
+        formatLogMessage(
+          `Day.js module doesn't support Nuxt v${getNuxtVersion(nuxt)}`
+        )
+      );
+    }
+    const isValid = validateModuleOptions(options);
+    if (!isValid) {
+      throw new Error(formatLogMessage("You must set valid module options"));
+    }
+    nuxt.options.build.transpile.push("@nuxtjs/dayjs");
+    const { resolve } = createResolver(import.meta.url);
+    const runtimeDir = resolve("./runtime");
+    addPlugin({
+      src: resolve(runtimeDir, `plugin`)
+    });
+    addTemplate({
+      filename: "dayjs.config.mjs",
+      getContents: () => generateConfigContents(options)
+    });
+    addImports({
+      name: "useDayjs",
+      as: "useDayjs",
+      from: resolve(runtimeDir, "composables")
+    });
+    nuxt.hook("prepare:types", ({ references }) => {
+      const plugins = options.plugins.map((p) => ({
+        types: `dayjs/plugin/${p}`
+      }));
+      references.push(...plugins);
+    });
+  }
+});
+
+export { module as default };

dist/runtime/composables.d.ts

@@ -0,0 +1,3 @@
+import dayjs from "dayjs";
+import "#build/dayjs.config.mjs";
+export declare function useDayjs(): typeof dayjs;

dist/runtime/composables.mjs

@@ -0,0 +1,6 @@
+import { useNuxtApp } from "#app";
+import "#build/dayjs.config.mjs";
+export function useDayjs() {
+  const { $dayjs } = useNuxtApp();
+  return $dayjs;
+}

dist/runtime/plugin.d.ts

@@ -0,0 +1,19 @@
+import dayjs from "dayjs";
+import "#build/dayjs.config.mjs";
+declare const _default: any;
+export default _default;
+interface PluginInjection {
+    $dayjs: typeof dayjs;
+}
+declare module "#app" {
+    interface NuxtApp extends PluginInjection {
+    }
+}
+declare module "@vue/runtime-core" {
+    interface ComponentCustomProperties extends PluginInjection {
+    }
+}
+declare module "vue/types/vue" {
+    interface Vue extends PluginInjection {
+    }
+}

dist/runtime/plugin.mjs

@@ -0,0 +1,6 @@
+import { defineNuxtPlugin } from "#app";
+import dayjs from "dayjs";
+import "#build/dayjs.config.mjs";
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.provide("dayjs", dayjs);
+});

dist/types.d.ts

@@ -0,0 +1,10 @@
+
+import { ModuleOptions } from './module'
+
+declare module '@nuxt/schema' {
+  interface NuxtConfig { ['dayjs']?: Partial<ModuleOptions> }
+  interface NuxtOptions { ['dayjs']?: ModuleOptions }
+}
+
+
+export { ModuleOptions, default } from './module'