Merge pull request Sofie-Automation#1230 from nrkno/feat/vite-ui-bundler2

Author: Julusian

.github/workflows/node.yaml

@@ -184,11 +184,18 @@ jobs:
         run: |
           cd meteor
           yarn inject-git-hash
+      - name: Prepare webui for meteor build
+        if: steps.check-build-and-push.outputs.enable == 'true'
+        run: |
+          rm -Rf meteor/public
+          cp -R packages/webui/dist meteor/public
       - name: Meteor Build
         if: steps.check-build-and-push.outputs.enable == 'true'
         run: |
           cd meteor
           NODE_OPTIONS="--max-old-space-size=4096" METEOR_DEBUG_BUILD=1 meteor build --allow-superuser --directory .
+          mv bundle/programs/web.browser/assets/ bundle/programs/web.browser/app/assets/ || true
+
       - name: Meteor Bundle NPM Build
         if: steps.check-build-and-push.outputs.enable == 'true'
         run: |
@@ -422,9 +429,11 @@ jobs:
           - mos-gateway
           - corelib
           - shared-lib
+          - meteor-lib
           - job-worker
           - openapi
           - live-status-gateway
+          - webui
 
     steps:
       - uses: actions/checkout@v4
@@ -491,6 +500,14 @@ jobs:
           - node-version: 18.x
             package-name: live-status-gateway
             send-coverage: true
+          - node-version: 18.x
+            package-name: webui
+          # manual meteor-lib as it only needs a couple of versions
+          - node-version: 18.x
+            package-name: meteor-lib
+            send-coverage: true
+          - node-version: 14.x
+            package-name: meteor-lib
 
     steps:
       - uses: actions/checkout@v4

DEVELOPER.md

@@ -36,6 +36,8 @@ yarn start
 
 > 💡 First startup may take a while, especially on Windows. To speed things up, consider adding `%LOCALAPPDATA%\.meteor` and the directory where you cloned `server-core` to your Windows Defender virus protection exclusions.
 
+The Sofie ui (served by Vite) can be accessed at `http://localhost:3005`. The meteor http server can be access directly at `http://localhost:3000`
+
 ### Slightly more Involved Start
 
 1. Clone the repository (for development, it is recommended to base your work on the latest unstable release branch)

meteor/.eslintrc.js

@@ -56,43 +56,20 @@ const tsBase = {
 }
 
 module.exports = {
-	extends: [...commonExtends, 'plugin:react/recommended'],
-	plugins: [...commonPlugins, 'react'],
+	extends: [...commonExtends],
+	plugins: [...commonPlugins],
 	rules: {
 		'prettier/prettier': 'error',
 	},
 	env: { es2017: true },
 	parserOptions: { sourceType: 'module', ecmaVersion: 2018 },
-	settings: {
-		react: {
-			version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
-		},
-	},
+	settings: {},
 	overrides: [
 		// Note: these replace the values defined above, so make sure to extend them if they are needed
 		{
 			files: ['*.ts'],
 			...tsBase,
 		},
-		{
-			files: ['*.tsx'],
-			...tsBase,
-			extends: [...tsBase.extends, 'plugin:react/recommended'],
-			parserOptions: {
-				...tsBase.parserOptions,
-				ecmaFeatures: {
-					jsx: true, // Allows for the parsing of JSX
-				},
-			},
-			rules: {
-				...tsBase.rules,
-				'node/no-extraneous-import': 'off', // because there are a lot of them as dev-dependencies
-				'node/no-missing-import': 'off', // erroring on every single import
-				'react/prop-types': 'off', // we don't use this
-				'@typescript-eslint/no-empty-interface': 'off', // many prop/state types are {}
-				'@typescript-eslint/promise-function-async': 'off', // event handlers can't be async
-			},
-		},
 		{
 			files: ['*.js'],
 			env: {

meteor/.gitignore

@@ -5,6 +5,7 @@ src/**/*.js.map
 coverage
 settings.json
 server/_force_restart.js
+public/
 
 # Ignore TV2-features:
 client/styles/tv2

meteor/Dockerfile

@@ -1,4 +1,18 @@
 # syntax=docker/dockerfile:experimental
+
+# BUILD WEBUI
+FROM node:18
+COPY packages /opt/core/packages
+WORKDIR /opt/core/packages
+
+RUN rm -R *-gateway documentation openapi
+RUN corepack enable
+RUN yarn install && yarn build
+
+# Install production dependencies for the worker
+# HACK: 
+# RUN yarn workspaces focus --production @sofie-automation/job-worker @sofie-automation/corelib
+
 # BUILD IMAGE
 FROM meteor/node:14.21.4
 RUN curl "https://install.meteor.com/?release=2.13.3" | sh
@@ -9,17 +23,18 @@ ENV NODE_ENV anythingButProduction
 
 # Prepare the packages
 COPY package.json /opt/core/package.json
-COPY packages /opt/core/packages
-WORKDIR /opt/core/packages
-RUN rm -R *-gateway documentation openapi
-RUN corepack enable
-RUN yarn install && yarn build
+COPY --from=0 /opt/core/packages /opt/core/packages
 
 # Add the meteor source
 COPY meteor /opt/core/meteor
 COPY scripts /opt/core/scripts
 WORKDIR /opt/core/meteor
 
+# move the webui to the correct place
+RUN rm -Rf /opt/core/meteor/public
+RUN cp -R /opt/core/packages/webui/dist /opt/core/meteor/public
+RUN rm -R /opt/core/packages/webui
+
 # Force meteor to setup the runtime
 RUN meteor --version --allow-superuser
 RUN meteor corepack enable
@@ -31,9 +46,8 @@ RUN --mount=type=cache,target=/opt/core/meteor/.meteor/local NODE_OPTIONS="--max
 WORKDIR /opt/bundle/programs/server/
 RUN npm install
 
-# Install production dependencies for the worker
-WORKDIR /opt/core/packages
-RUN yarn workspaces focus --production @sofie-automation/job-worker @sofie-automation/corelib
+# meteor does something weird with these files
+RUN mv /opt/bundle/programs/web.browser/assets /opt/bundle/programs/web.browser/app/assets || true
 
 # DEPLOY IMAGE
 FROM alpine:3.19
@@ -60,11 +74,8 @@ ENV PATH $DIR_NODE/v$NODE_VERSION/bin:$PATH
 # confirm installation
 RUN node -v && npm -v
 
-COPY --from=0 /opt/bundle /opt/core
+COPY --from=1 /opt/bundle /opt/core
 COPY meteor/docker-entrypoint.sh /opt
 
-# Tell meteor where the worker code is located
-ENV WORKER_EXEC_DIR=/opt/packages/job-worker
-
 WORKDIR /opt/core/
 CMD ["/opt/docker-entrypoint.sh"]

meteor/__mocks__/_extendJest.ts

@@ -2,9 +2,8 @@ import { UserError, UserErrorMessage } from '@sofie-automation/corelib/dist/erro
 import { Meteor } from 'meteor/meteor'
 import { clone } from '@sofie-automation/corelib/dist/lib'
 import { stringifyError } from '@sofie-automation/shared-lib/dist/lib/stringifyError'
-import '../server/api/logger'
 import _ from 'underscore'
-import { ClientAPI } from '../lib/api/client'
+import { ClientAPI } from '@sofie-automation/meteor-lib/dist/api/client'
 
 // Include this file in to get access to the extended functions
 

meteor/__mocks__/_setupMocks.ts

@@ -2,7 +2,7 @@ import { setLogLevel } from '../server/logging'
 import { Fiber } from './Fibers'
 import { resetRandomId } from './random'
 import { makeCompatible } from 'meteor-promise'
-import { LogLevel } from '../lib/lib'
+import { LogLevel } from '../server/lib/tempLib'
 import { SupressLogMessages } from './suppressLogging'
 
 // This file is run before all tests start.
@@ -34,8 +34,6 @@ jest.mock('meteor/webapp', (...args) => require('./webapp').setup(args), { virtu
 jest.mock('../server/api/integration/slack', (...args) => require('./slack').setup(args), { virtual: true })
 jest.mock('../server/worker/worker', (...args) => require('./worker').setup(args), { virtual: true })
 
-require('../server/api/logger.ts')
-
 SupressLogMessages.init()
 
 beforeEach(() => {

meteor/__mocks__/defaultCollectionObjects.ts

@@ -1,5 +1,5 @@
 import { DBStudio } from '@sofie-automation/corelib/dist/dataModel/Studio'
-import { clone, getCurrentTime, unprotectString } from '../lib/lib'
+import { clone, unprotectString } from '../server/lib/tempLib'
 import { DBRundownPlaylist } from '@sofie-automation/corelib/dist/dataModel/RundownPlaylist'
 import { DBRundown } from '@sofie-automation/corelib/dist/dataModel/Rundown'
 import { DBSegment } from '@sofie-automation/corelib/dist/dataModel/Segment'
@@ -9,7 +9,7 @@ import { Piece, EmptyPieceTimelineObjectsBlob } from '@sofie-automation/corelib/
 import { AdLibPiece } from '@sofie-automation/corelib/dist/dataModel/AdLibPiece'
 import { getRundownId } from '../server/api/ingest/lib'
 import { wrapDefaultObject } from '@sofie-automation/corelib/dist/settings/objectWithOverrides'
-import { PartInstance } from '../lib/collections/PartInstances'
+import { PartInstance } from '@sofie-automation/meteor-lib/dist/collections/PartInstances'
 import { PieceInstance } from '@sofie-automation/corelib/dist/dataModel/PieceInstance'
 import {
 	PartId,
@@ -37,8 +37,8 @@ export function defaultRundownPlaylist(_id: RundownPlaylistId, studioId: StudioI
 		studioId: studioId,
 
 		name: 'Default RundownPlaylist',
-		created: getCurrentTime(),
-		modified: getCurrentTime(),
+		created: Date.now(),
+		modified: Date.now(),
 
 		// activationId: undefined,
 		rehearsal: false,
@@ -72,8 +72,8 @@ export function defaultRundown(
 		externalId: externalId,
 		name: 'Default Rundown',
 
-		created: getCurrentTime(),
-		modified: getCurrentTime(),
+		created: Date.now(),
+		modified: Date.now(),
 		importVersions: {
 			studio: '',
 			showStyleBase: '',

meteor/__mocks__/helpers/database.ts

@@ -36,18 +36,18 @@ import {
 import { DBShowStyleBase } from '@sofie-automation/corelib/dist/dataModel/ShowStyleBase'
 import { DBShowStyleVariant } from '@sofie-automation/corelib/dist/dataModel/ShowStyleVariant'
 import { Blueprint } from '@sofie-automation/corelib/dist/dataModel/Blueprint'
-import { ICoreSystem, SYSTEM_ID, stripVersion } from '../../lib/collections/CoreSystem'
+import { ICoreSystem, SYSTEM_ID } from '@sofie-automation/meteor-lib/dist/collections/CoreSystem'
+import { stripVersion } from '../../server/systemStatus/semverUtils'
 import { internalUploadBlueprint } from '../../server/api/blueprints/api'
 import {
 	literal,
-	getCurrentTime,
 	protectString,
 	unprotectString,
 	getRandomId,
 	getRandomString,
 	Complete,
 	normalizeArray,
-} from '../../lib/lib'
+} from '../../server/lib/tempLib'
 import { DBRundown } from '@sofie-automation/corelib/dist/dataModel/Rundown'
 import { DBSegment } from '@sofie-automation/corelib/dist/dataModel/Segment'
 import { DBPart } from '@sofie-automation/corelib/dist/dataModel/Part'
@@ -59,14 +59,14 @@ import { restartRandomId } from '../random'
 import { MongoMock } from '../mongo'
 import { defaultRundownPlaylist, defaultStudio } from '../defaultCollectionObjects'
 import { PackageInfo } from '../../server/coreSystem'
-import { DBTriggeredActions } from '../../lib/collections/TriggeredActions'
-import { WorkerStatus } from '../../lib/collections/Workers'
+import { DBTriggeredActions } from '@sofie-automation/meteor-lib/dist/collections/TriggeredActions'
+import { WorkerStatus } from '@sofie-automation/meteor-lib/dist/collections/Workers'
 import { WorkerThreadStatus } from '@sofie-automation/corelib/dist/dataModel/WorkerThreads'
 import {
 	applyAndValidateOverrides,
 	wrapDefaultObject,
 } from '@sofie-automation/corelib/dist/settings/objectWithOverrides'
-import { UIShowStyleBase } from '../../lib/api/showStyles'
+import { UIShowStyleBase } from '@sofie-automation/meteor-lib/dist/api/showStyles'
 import {
 	BlueprintId,
 	OrganizationId,
@@ -624,8 +624,8 @@ export async function setupDefaultRundown(
 		externalId: 'MOCK_RUNDOWN_' + rundownId,
 		name: 'Default Rundown',
 
-		created: getCurrentTime(),
-		modified: getCurrentTime(),
+		created: Date.now(),
+		modified: Date.now(),
 		importVersions: {
 			studio: '',
 			showStyleBase: '',

meteor/__mocks__/helpers/lib.ts

@@ -1,5 +1,5 @@
 import * as _ from 'underscore'
-import { LogLevel, ProtectedString } from '../../lib/lib'
+import { LogLevel, ProtectedString } from '../../server/lib/tempLib'
 import { AsyncOnlyMongoCollection } from '../../server/collections/collection'
 import { getLogLevel, setLogLevel } from '../../server/logging'