📦 Akryum / meteor-vite

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156import { Meteor } from 'meteor/meteor'
import { Mongo } from 'meteor/mongo'
import type { WorkerResponseData } from '../../../npm-packages/meteor-vite/src/bin/worker'

export type RuntimeConfig = WorkerResponseData<'viteConfig'> & { ready: boolean; lastUpdate: number }

export const VITE_ENTRYPOINT_SCRIPT_ID = 'meteor-vite-entrypoint-script'
export const VITE_CLIENT_SCRIPT_ID = 'meteor-vite-client'

const logLabel = Meteor.isClient ? `[Meteor-Vite] ⚡ ` : '⚡  '

export const DevConnectionLog = {
  _logToScreen(message: string) {
    if (!Meteor.isClient)
      return
    const messageNode = document.createElement('div')
    messageNode.textContent = message
    document.querySelector('.vite-status-text')?.prepend(messageNode)
  },
  info: (message: string, ...params: Parameters<typeof console.log>) => {
    DevConnectionLog._logToScreen(` ⚡ ${message}`)
    console.info(
            `${logLabel} ${message}`,
            ...params,
    )
  },
  debug: (message: string, ...params: Parameters<typeof console.log>) => {
    DevConnectionLog._logToScreen(` ⚡ ${message}`)
    console.debug(
            `${logLabel} ${message}`,
            ...params,
    )
  },
  error: (message: string, ...params: Parameters<typeof console.log>) => {
    for (const param of params) {
      if (param instanceof Error && param.stack)
        DevConnectionLog._logToScreen(param.stack)
    }
    DevConnectionLog._logToScreen(` ⚡ ${message}`)
    console.error(
            `${logLabel} ${message}`,
            ...params,
    )
  },
}

export class ViteDevScripts {
  public readonly urls
  constructor(public readonly config: RuntimeConfig) {
    const baseUrl = `http://${config.host || 'localhost'}:${config.port}`
    this.urls = {
      baseUrl,
      entrypointUrl: `${baseUrl}/${config.entryFile}`,
      viteClientUrl: `${baseUrl}/@vite/client`,
    }
  }

  public stringTemplate() {
    const { viteClientUrl, entrypointUrl } = this.urls
    const viteClient = `<script src="${viteClientUrl}" type="module" id="${VITE_CLIENT_SCRIPT_ID}"></script>`
    const viteEntrypoint = `<script src="${entrypointUrl}" type="module" id="${VITE_ENTRYPOINT_SCRIPT_ID}"></script>`

    if (this.config.ready)
      return `${viteClient}\n${viteEntrypoint}`

    return Assets.getText('loading/dev-server-splash.html') as string
  }

  public injectScriptsInDOM() {
    if (Meteor.isServer)
      throw new Error('This can only run on the client!')

    if (!Meteor.isDevelopment)
      return

    // If the scripts already exists on the page, throw an error to prevent adding more than one script.
    const existingScript = document.getElementById(VITE_ENTRYPOINT_SCRIPT_ID) || document.getElementById(VITE_CLIENT_SCRIPT_ID)
    if (existingScript)
      throw new Error('Vite script already exists in the current document')

    const TemporaryElements = {
      splashScreen: document.getElementById('meteor-vite-splash-screen'),
      styles: document.getElementById('meteor-vite-styles'),
    }

    // Otherwise create a new set of nodes so they can be appended to the document.
    const viteEntrypoint = document.createElement('script')
    viteEntrypoint.id = VITE_ENTRYPOINT_SCRIPT_ID
    viteEntrypoint.src = this.urls.entrypointUrl
    viteEntrypoint.type = 'module'
    viteEntrypoint.setAttribute('defer', 'true')

    const viteClient = document.createElement('script')
    viteClient.id = VITE_CLIENT_SCRIPT_ID
    viteClient.src = this.urls.viteClientUrl
    viteClient.type = 'module'

    viteEntrypoint.onerror = (error) => {
      DevConnectionLog.error('Vite entrypoint module failed to load! Will refresh page shortly...', error)
      setTimeout(() => window.location.reload(), 15_000)
    }
    viteEntrypoint.onload = () => {
      DevConnectionLog.info('Loaded Vite module dynamically! Hopefully all went well and your app is usable. 🤞')
      TemporaryElements.splashScreen?.remove()
      TemporaryElements.styles?.remove()
    }

    document.body.prepend(viteEntrypoint, viteClient)
  }
}

const runtimeConfig: RuntimeConfig = {
  ready: false,
  host: 'localhost',
  port: 0,
  entryFile: '',
  lastUpdate: Date.now(),
}

export const ViteConnection = {
  publication: '_meteor_vite' as const,
  methods: {
    refreshConfig: '_meteor_vite_refresh_config',
  },
  configSelector: { _id: 'viteConfig' },
}

// eslint-disable-next-line import/no-mutable-exports
export let MeteorViteConfig: Mongo.Collection<RuntimeConfig>

if (Meteor.isDevelopment)
  MeteorViteConfig = new Mongo.Collection(ViteConnection.publication)

export function getConfig() {
  const viteConfig = MeteorViteConfig.findOne(ViteConnection.configSelector)
  const config = viteConfig || runtimeConfig
  return {
    ...config,
    age: Date.now() - config.lastUpdate,
  }
}

export function setConfig<TConfig extends Partial<RuntimeConfig>>(config: TConfig) {
  Object.assign(runtimeConfig, config, ViteConnection.configSelector, { lastUpdate: Date.now() })

  if (runtimeConfig.port && runtimeConfig.host && runtimeConfig.entryFile)
    runtimeConfig.ready = true

  MeteorViteConfig.upsert(ViteConnection.configSelector, runtimeConfig)
  return runtimeConfig
}

export function publishConfig() {
  return MeteorViteConfig.find(ViteConnection.configSelector)
}