fix: demo build

.eslintrc

@@ -22,7 +22,6 @@
   ],
   "globals": {
     "KOEL_ENV": "readonly",
-    "NODE_ENV": "readonly",
     "FileReader": "readonly",
     "defineProps": "readonly",
     "defineEmits": "readonly",

package.json

@@ -95,7 +95,7 @@
     "test:e2e": "kill-port 8080 && start-test dev :8080 'cypress open'",
     "test:e2e:ci": "kill-port 8080 && start-test 'php artisan serve --port=8080 --quiet' http-get://localhost:8080/api/ping 'cypress run'",
     "build": "yarn prod",
-    "build-demo": "cross-env NODE_ENV=demo npm run production",
+    "build-demo": "cross-env KOEL_ENV=demo mix --production",
     "dev": "start-test 'php artisan serve --port=8000 --quiet' http-get://localhost:8000/api/ping hot",
     "development": "mix",
     "watch": "mix watch",

resources/assets/jest.config.js

@@ -28,8 +28,7 @@ module.exports = {
     `node_modules/(?!(${forceTransformModules.join('|')})/)`
   ],
   globals: {
-    KOEL_ENV: 'web',
+    KOEL_ENV: ''
-    NODE_ENV: 'test'
   },
   setupFilesAfterEnv: ['<rootDir>/js/__tests__/setup.ts'],
   verbose: true,

resources/assets/js/components/auth/LoginForm.vue

@@ -12,6 +12,7 @@
 <script lang="ts" setup>
 import { defineAsyncComponent, ref } from 'vue'
 import { userStore } from '@/stores'
+import { isDemo } from '@/utils'
 
 const DEMO_ACCOUNT = {
   email: 'demo@koel.dev',
@@ -21,8 +22,8 @@ const DEMO_ACCOUNT = {
 const Btn = defineAsyncComponent(() => import('@/components/ui/Btn.vue'))
 
 const url = ref('')
-const email = ref(NODE_ENV === 'demo' ? DEMO_ACCOUNT.email : '')
+const email = ref(isDemo ? DEMO_ACCOUNT.email : '')
-const password = ref(NODE_ENV === 'demo' ? DEMO_ACCOUNT.password : '')
+const password = ref(isDemo ? DEMO_ACCOUNT.password : '')
 const failed = ref(false)
 
 const emit = defineEmits(['loggedin'])

resources/assets/js/components/meta/AboutKoelModal.vue

@@ -25,7 +25,7 @@
         <a href="https://github.com/koel/koel/graphs/contributors" rel="noopener" target="_blank">contributors</a>.
       </p>
 
-      <p v-if="demo" class="demo-credits">
+      <p v-if="isDemo" class="demo-credits">
         Demo music provided by
         <a href="https://www.bensound.com" rel="noopener" target="_blank">Bensound</a>.
       </p>
@@ -48,11 +48,10 @@
 import compareVersions from 'compare-versions'
 import { defineAsyncComponent } from 'vue'
 import { commonStore, userStore } from '@/stores'
+import { isDemo } from '@/utils'
 
 const Btn = defineAsyncComponent(() => import('@/components/ui/Btn.vue'))
 
-const demo = NODE_ENV === 'demo'
-
 const latestVersionUrl = `https://github.com/phanan/koel/releases/tag/${commonStore.state.latestVersion}`
 const shouldDisplayVersionUpdate = userStore.state.current.is_admin
 

resources/assets/js/components/profile-preferences/ProfileForm.vue

@@ -42,7 +42,7 @@
 
     <div class="form-row">
       <Btn class="btn-submit" type="submit">Save</Btn>
-      <span v-if="demo" style="font-size:.95rem; opacity:.7; margin-left:5px">
+      <span v-if="isDemo" class="demo-notice">
         Changes will not be saved in the demo version.
       </span>
     </div>
@@ -52,11 +52,10 @@
 <script lang="ts" setup>
 import { defineAsyncComponent, onMounted, ref } from 'vue'
 import { UpdateCurrentProfileData, userStore } from '@/stores'
-import { alerts, parseValidationError } from '@/utils'
+import { alerts, isDemo, parseValidationError } from '@/utils'
 
 const Btn = defineAsyncComponent(() => import('@/components/ui/Btn.vue'))
 
-const demo = NODE_ENV === 'demo'
 const profile = ref<UpdateCurrentProfileData>({} as unknown as UpdateCurrentProfileData)
 
 onMounted(() => {
@@ -72,6 +71,11 @@ const update = async () => {
     throw Error()
   }
 
+  if (isDemo) {
+    alerts.success('Profile updated.')
+    return
+  }
+
   try {
     await userStore.updateProfile(profile.value)
     profile.value.current_password = null
@@ -99,6 +103,12 @@ input {
   margin-top: .75rem;
 }
 
+.demo-notice {
+  font-size: .95rem;
+  opacity: .7;
+  margin-left: 5px;
+}
+
 @media only screen and (max-width: 667px) {
   input {
     &[type="text"], &[type="email"], &[type="password"] {

resources/assets/js/types.d.ts

@@ -91,8 +91,7 @@ declare module 'nouislider' {
   }): void
 }
 
-declare const KOEL_ENV: 'app' | 'web'
+declare const KOEL_ENV: '' | 'demo'
-declare const NODE_ENV: 'dev' | 'test' | 'prod' | 'demo'
 
 declare module '*.vue' {
   import { defineComponent } from 'vue'

resources/assets/js/utils/common.ts

@@ -109,3 +109,5 @@ export const startDragging = (event: DragEvent, dragged: Song | Song[] | Album |
 
   createGhostDragImage(event, text)
 }
+
+export const isDemo = KOEL_ENV === 'demo'

webpack.config.js

@@ -24,8 +24,7 @@ module.exports = {
   },
   plugins: [
     new webpack.DefinePlugin({
-      KOEL_ENV: '"web"',
+      KOEL_ENV: JSON.stringify(process.env.KOEL_ENV || '""')
-      NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development')
     })
   ],
   devServer: {