create-miro-app - npm Package Compare versions

Comparing version 1.12.1 to 1.13.0

dist/targets/client/react/src/app.jsx

 import * as React from 'react';
 import {createRoot} from 'react-dom/client';
 
+import '../src/assets/style.css';
+
 async function addSticky() {
@@ -5,0 +7,0 @@ const stickyNote = await miro.board.createStickyNote({

dist/targets/client/vanilla/src/app.js

@@ -0,1 +1,3 @@
+import './assets/style.css';
+
 async function addSticky() {
@@ -2,0 +4,0 @@ const stickyNote = await miro.board.createStickyNote({

dist/targets/client/vanilla/src/app.ts

@@ -0,1 +1,3 @@
+import './assets/style.css';
+
 async function addSticky() {
@@ -2,0 +4,0 @@ const stickyNote = await miro.board.createStickyNote({

dist/targets/client/vue/src/app.js

 import {createApp} from 'vue';
 import App from './App.vue';
 
+import './assets/style.css';
+
 createApp(App).mount('#root');

dist/targets/client/vue/src/app.ts

 import {createApp} from 'vue';
 import App from './App.vue';
 
+import './assets/style.css';
+
 createApp(App).mount('#root');

dist/targets/universal/nextjs/cma-config.ts

@@ -25,2 +25,12 @@ import pc from 'picocolors';
   },
+  customTSConfig: {
+    include: ['src', 'app', '*.ts', '.next/types/**/*.ts'],
+    compilerOptions: {
+      plugins: [
+        {
+          name: 'next',
+        },
+      ],
+    },
+  },
   templates: [SharedTemplates.ClientAssets],
@@ -27,0 +37,0 @@ variants: [

dist/targets/universal/nextjs/initMiro.js

 import {Miro} from '@mirohq/miro-api';
-import {serialize} from 'cookie';
+import {cookies} from 'next/headers';
 
-function getSerializedCookie(name, value) {
-  return serialize(name, value, {
-    path: '/',
-    httpOnly: true,
-    sameSite: 'none',
-    secure: true,
-  });
-}
+const tokensCookie = 'miro_tokens';
 
-export default function initMiro(request, response) {
-  const tokensCookie = 'miro_tokens';
+export default function initMiro() {
+  const cookieInstance = cookies();
 
+  const getCookieValue = (key = tokensCookie) => {
+    // Load state (tokens) from a cookie if it's set
+    try {
+      return JSON.parse(cookieInstance.get(key)?.value);
+    } catch (err) {
+      return null;
+    }
+  };
+
   // setup a Miro instance that loads tokens from cookies
@@ -21,22 +23,17 @@ return {
         get: () => {
-          // Load state (tokens) from a cookie if it's set
-          try {
-            return JSON.parse(request.cookies[tokensCookie] || 'null');
-          } catch (err) {
-            return null;
-          }
+          return getCookieValue();
         },
         set: (_, state) => {
-          if (!response)
-            throw new Error(
-              'initMiro should be invoked with a response object',
-            );
-          // store state (tokens) in the cookie
-          response.setHeader('Set-Cookie', [
-            getSerializedCookie(tokensCookie, JSON.stringify(state)),
-          ]);
+          cookieInstance.set(tokensCookie, JSON.stringify(state), {
+            path: '/',
+            httpOnly: true,
+            sameSite: 'none',
+            secure: true,
+          });
         },
       },
     }),
+    // User id might be undefined if the user is not logged in yet, we will know it after the redirect happened
+    userId: getCookieValue()?.userId || '',
   };
 }

dist/targets/universal/nextjs/initMiro.ts

 import {Miro} from '@mirohq/miro-api';
-import {serialize} from 'cookie';
+import {cookies} from 'next/headers';
+import {State} from '@mirohq/miro-api/dist/storage';
 
-function getSerializedCookie(name: string, value: string) {
-  return serialize(name, value, {
-    path: '/',
-    httpOnly: true,
-    sameSite: 'none',
-    secure: true,
-  });
-}
+const tokensCookie = 'miro_tokens';
 
-export default function initMiro(
-  request: {cookies: Record<string, undefined | string>},
-  response?: {setHeader(name: string, value: string[]): void},
-) {
-  const tokensCookie = 'miro_tokens';
+export default function initMiro() {
+  const cookieInstance = cookies();
 
+  const getCookieValue = (key: string = tokensCookie) => {
+    // Load state (tokens) from a cookie if it's set
+    try {
+      return JSON.parse(cookieInstance.get(key)?.value!) as State;
+    } catch (err) {
+      return null;
+    }
+  };
+
   // setup a Miro instance that loads tokens from cookies
@@ -24,22 +24,17 @@ return {
         get: () => {
-          // Load state (tokens) from a cookie if it's set
-          try {
-            return JSON.parse(request.cookies[tokensCookie] || 'null');
-          } catch (err) {
-            return null;
-          }
+          return getCookieValue();
         },
         set: (_, state) => {
-          if (!response)
-            throw new Error(
-              'initMiro should be invoked with a response object',
-            );
-          // store state (tokens) in the cookie
-          response.setHeader('Set-Cookie', [
-            getSerializedCookie(tokensCookie, JSON.stringify(state)),
-          ]);
+          cookieInstance.set(tokensCookie, JSON.stringify(state), {
+            path: '/',
+            httpOnly: true,
+            sameSite: 'none',
+            secure: true,
+          });
         },
       },
     }),
+    // User id might be undefined if the user is not logged in yet, we will know it after the redirect happened
+    userId: getCookieValue()?.userId || '',
   };
 }

dist/templates/targets/client/react/src/app.jsx

 import * as React from 'react';
 import {createRoot} from 'react-dom/client';
 
+import '../src/assets/style.css';
+
 async function addSticky() {
@@ -5,0 +7,0 @@ const stickyNote = await miro.board.createStickyNote({

dist/templates/targets/client/vanilla/src/app.js

@@ -0,1 +1,3 @@
+import './assets/style.css';
+
 async function addSticky() {
@@ -2,0 +4,0 @@ const stickyNote = await miro.board.createStickyNote({

dist/templates/targets/client/vanilla/src/app.ts

@@ -0,1 +1,3 @@
+import './assets/style.css';
+
 async function addSticky() {
@@ -2,0 +4,0 @@ const stickyNote = await miro.board.createStickyNote({

dist/templates/targets/client/vue/src/app.js

 import {createApp} from 'vue';
 import App from './App.vue';
 
+import './assets/style.css';
+
 createApp(App).mount('#root');

dist/templates/targets/client/vue/src/app.ts

 import {createApp} from 'vue';
 import App from './App.vue';
 
+import './assets/style.css';
+
 createApp(App).mount('#root');

dist/templates/targets/universal/nextjs/cma-config.ts

@@ -25,2 +25,12 @@ import pc from 'picocolors';
   },
+  customTSConfig: {
+    include: ['src', 'app', '*.ts', '.next/types/**/*.ts'],
+    compilerOptions: {
+      plugins: [
+        {
+          name: 'next',
+        },
+      ],
+    },
+  },
   templates: [SharedTemplates.ClientAssets],
@@ -27,0 +37,0 @@ variants: [

dist/templates/targets/universal/nextjs/initMiro.js

 import {Miro} from '@mirohq/miro-api';
-import {serialize} from 'cookie';
+import {cookies} from 'next/headers';
 
-function getSerializedCookie(name, value) {
-  return serialize(name, value, {
-    path: '/',
-    httpOnly: true,
-    sameSite: 'none',
-    secure: true,
-  });
-}
+const tokensCookie = 'miro_tokens';
 
-export default function initMiro(request, response) {
-  const tokensCookie = 'miro_tokens';
+export default function initMiro() {
+  const cookieInstance = cookies();
 
+  const getCookieValue = (key = tokensCookie) => {
+    // Load state (tokens) from a cookie if it's set
+    try {
+      return JSON.parse(cookieInstance.get(key)?.value);
+    } catch (err) {
+      return null;
+    }
+  };
+
   // setup a Miro instance that loads tokens from cookies
@@ -21,22 +23,17 @@ return {
         get: () => {
-          // Load state (tokens) from a cookie if it's set
-          try {
-            return JSON.parse(request.cookies[tokensCookie] || 'null');
-          } catch (err) {
-            return null;
-          }
+          return getCookieValue();
         },
         set: (_, state) => {
-          if (!response)
-            throw new Error(
-              'initMiro should be invoked with a response object',
-            );
-          // store state (tokens) in the cookie
-          response.setHeader('Set-Cookie', [
-            getSerializedCookie(tokensCookie, JSON.stringify(state)),
-          ]);
+          cookieInstance.set(tokensCookie, JSON.stringify(state), {
+            path: '/',
+            httpOnly: true,
+            sameSite: 'none',
+            secure: true,
+          });
         },
       },
     }),
+    // User id might be undefined if the user is not logged in yet, we will know it after the redirect happened
+    userId: getCookieValue()?.userId || '',
   };
 }

dist/templates/targets/universal/nextjs/initMiro.ts

 import {Miro} from '@mirohq/miro-api';
-import {serialize} from 'cookie';
+import {cookies} from 'next/headers';
+import {State} from '@mirohq/miro-api/dist/storage';
 
-function getSerializedCookie(name: string, value: string) {
-  return serialize(name, value, {
-    path: '/',
-    httpOnly: true,
-    sameSite: 'none',
-    secure: true,
-  });
-}
+const tokensCookie = 'miro_tokens';
 
-export default function initMiro(
-  request: {cookies: Record<string, undefined | string>},
-  response?: {setHeader(name: string, value: string[]): void},
-) {
-  const tokensCookie = 'miro_tokens';
+export default function initMiro() {
+  const cookieInstance = cookies();
 
+  const getCookieValue = (key: string = tokensCookie) => {
+    // Load state (tokens) from a cookie if it's set
+    try {
+      return JSON.parse(cookieInstance.get(key)?.value!) as State;
+    } catch (err) {
+      return null;
+    }
+  };
+
   // setup a Miro instance that loads tokens from cookies
@@ -24,22 +24,17 @@ return {
         get: () => {
-          // Load state (tokens) from a cookie if it's set
-          try {
-            return JSON.parse(request.cookies[tokensCookie] || 'null');
-          } catch (err) {
-            return null;
-          }
+          return getCookieValue();
         },
         set: (_, state) => {
-          if (!response)
-            throw new Error(
-              'initMiro should be invoked with a response object',
-            );
-          // store state (tokens) in the cookie
-          response.setHeader('Set-Cookie', [
-            getSerializedCookie(tokensCookie, JSON.stringify(state)),
-          ]);
+          cookieInstance.set(tokensCookie, JSON.stringify(state), {
+            path: '/',
+            httpOnly: true,
+            sameSite: 'none',
+            secure: true,
+          });
         },
       },
     }),
+    // User id might be undefined if the user is not logged in yet, we will know it after the redirect happened
+    userId: getCookieValue()?.userId || '',
   };
 }

package.json

 {
 	"name": "create-miro-app",
-	"version": "1.12.1",
+	"version": "1.13.0",
 	"keywords": [
@@ -26,3 +26,3 @@ "miro",
 	"engines": {
-		"node": ">=16.0.0"
+		"node": ">=20.0.0"
 	},
@@ -49,11 +49,11 @@ "scripts": {
 		"@types/analytics-node": "^3.1.9",
-		"@types/async-retry": "1.4.5",
-		"@types/cross-spawn": "6.0.2",
+		"@types/async-retry": "1.4.8",
+		"@types/cross-spawn": "6.0.5",
 		"@types/express": "^4.17.14",
-		"@types/lodash.template": "4.5.1",
-		"@types/node": "18.15.10",
-		"@types/prompts": "2.4.3",
+		"@types/lodash.template": "4.5.2",
+		"@types/node": "18.18.7",
+		"@types/prompts": "2.4.7",
 		"@types/rimraf": "3.0.2",
 		"@types/tar": "6.1.4",
-		"@types/validate-npm-package-name": "4.0.0",
+		"@types/validate-npm-package-name": "4.0.1",
 		"@vercel/ncc": "0.36.1",
@@ -74,3 +74,3 @@ "analytics-node": "^6.2.0",
 		"tar": "6.1.13",
-		"typescript": "5.0.2",
+		"typescript": "5.2.2",
 		"update-check": "1.5.4",
@@ -82,3 +82,5 @@ "validate-npm-package-name": "5.0.0"
 	},
-	"dependencies": {}
+	"dependencies": {
+		"lodash.merge": "^4.6.2"
+	}
 }

README.md

@@ -37,3 +37,4 @@ ## Create a Miro app
 `create-miro-app` collects completely anonymous analytics data about framework
-and language usage. To opt-out, set the following environment variable: DO_NOT_TRACK=1
+and language usage. To opt-out, set the following environment variable:
+DO_NOT_TRACK=1
 
@@ -45,1 +46,9 @@ ## See also
   tutorial guides you through the process step by step.
+
+## Prerequisites
+
+You need to have node >= 20
+
+```bash
+nvm use
+```

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

942236

increased by1.53%

Number of lines in readme file

53

increased by20.45%

Worsened metrics

Dependency count

1

increased byInfinity%

Lines of code

3818

decreased by-0.18%

Number of medium supply chain risk alerts

15

increased by7.14%

Dependency changes

• + Addedlodash.merge@^4.6.2

• + Addedlodash.merge@4.6.2(transitive)