scandic/contentstack-imagevault
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat/SW-3031 imagevault updates

Browse Source 
* chore(SW-3031): Updated dependencies
* feat(SW-3031): Added Imagevault Id to title and updated delete functionality

Approved-by: Michael Zetterberg
This commit is contained in:
Erik Tiekstra
2025-06-18 13:14:02 +00:00
parent b1aaa6fd56
commit 7e64becb40
20 changed files with 5450 additions and 3072 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.prettierignore
View File

@@ -1,7 +1,7 @@
**/build
**/public
**/package.json
**/.eslintrc.cjs
**/eslint.config.mjs
**/tsconfig.json
.husky

7846
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

48
package.json
View File

@@ -17,32 +17,34 @@
"dev:rte": "cd rte && npm run dev",
"prepare": "husky"
},
"overrides": {
"@types/react": "18.2.20"
},
"dependencies": {
"@contentstack/app-sdk": "^2.1.1",
"@contentstack/venus-components": "2.2.5",
"react": "^18.3.1",
"react-dom": "^18.3.1"
"@contentstack/app-sdk": "^2.3.1",
"@contentstack/venus-components": "^3.0.0",
"react": "^19.1.0",
"react-dom": "^19.1.0"
},
"devDependencies": {
"@types/react-dom": "^18.3.1",
"@typescript-eslint/eslint-plugin": "^6.21.0",
"@typescript-eslint/parser": "^6.21.0",
"concurrently": "^8.2.2",
"eslint": "^8.57.1",
"eslint-import-resolver-typescript": "^3.6.3",
"@eslint/compat": "^1.3.0",
"@eslint/eslintrc": "^3.3.1",
"@eslint/js": "^9.29.0",
"@types/react-dom": "^19.1.6",
"@typescript-eslint/eslint-plugin": "^8.34.0",
"@typescript-eslint/parser": "^8.34.0",
"concurrently": "^9.1.2",
"eslint": "^9.29.0",
"eslint-import-resolver-typescript": "^4.4.3",
"eslint-plugin-import": "^2.31.0",
"eslint-plugin-jsx-a11y": "^6.10.1",
"eslint-plugin-react": "^7.37.2",
"eslint-plugin-react-hooks": "^4.6.2",
"husky": "^9.1.6",
"lint-staged": "^15.2.10",
"prettier": "^3.3.3",
"typescript": "^5.6.3",
"vite": "^5.4.10",
"vite-plugin-lib-inject-css": "^2.1.1",
"vite-tsconfig-paths": "^4.3.2"
"eslint-plugin-jsx-a11y": "^6.10.2",
"eslint-plugin-react": "^7.37.5",
"eslint-plugin-react-hooks": "^5.2.0",
"globals": "^16.2.0",
"husky": "^9.1.7",
"lint-staged": "^16.1.2",
"prettier": "^3.5.3",
"typescript": "^5.8.3",
"vite": "^6.3.5",
"vite-plugin-devtools-json": "^0.2.0",
"vite-plugin-lib-inject-css": "^2.2.2",
"vite-tsconfig-paths": "^5.1.4"
}
}

90
remix/.eslintrc.cjs
View File

@@ -1,90 +0,0 @@
/**
* This is intended to be a basic starting point for linting in your app.
* It relies on recommended configs out of the box for simplicity, but you can
* and should modify this configuration to best suit your team's needs.
*/
/** @type {import('eslint').Linter.Config} */
module.exports = {
root: true,
parserOptions: {
ecmaVersion: "latest",
sourceType: "module",
ecmaFeatures: {
jsx: true,
},
},
env: {
browser: true,
commonjs: true,
es6: true,
},
ignorePatterns: ["build/**/*", "node_modules/**/*", "public/**/*"],
// Base config
extends: ["eslint:recommended"],
overrides: [
// React
{
files: ["**/*.{js,jsx,ts,tsx}"],
plugins: ["react", "jsx-a11y"],
rules: {
"react/jsx-uses-vars": "error",
"react/jsx-uses-react": "error",
},
extends: [
"plugin:react/recommended",
"plugin:react/jsx-runtime",
"plugin:react-hooks/recommended",
"plugin:jsx-a11y/recommended",
],
settings: {
react: {
version: "detect",
},
formComponents: ["Form"],
linkComponents: [
{ name: "Link", linkAttribute: "to" },
{ name: "NavLink", linkAttribute: "to" },
],
"import/resolver": {
typescript: {
project: "./remix/tsconfig.json",
},
},
},
},
// Typescript
{
files: ["**/*.{ts,tsx}"],
plugins: ["@typescript-eslint", "import"],
parser: "@typescript-eslint/parser",
settings: {
"import/internal-regex": "^~/",
"import/resolver": {
node: {
extensions: [".ts", ".tsx"],
},
typescript: {
alwaysTryTypes: true,
},
},
},
extends: [
"plugin:@typescript-eslint/recommended",
"plugin:import/recommended",
"plugin:import/typescript",
],
},
// Node
{
files: [".eslintrc.cjs"],
env: {
node: true,
},
},
],
}

30
remix/app/components/ConfigForm.tsx
View File

@@ -27,23 +27,20 @@ export default function ConfigForm({
<FieldLabel version="v2" htmlFor="baseUrl">
Base url for contentstack
</FieldLabel>
<Help text="Including the region. Used as publishing source on ImageVault" />
<Help
type="basic"
text="Including the region. Used as publishing source on ImageVault"
/>
<TextInput
id="baseUrl"
name="baseUrl"
type="url"
value={finalValues.baseUrl}
onChange={(evt: ChangeEvent<HTMLInputElement>) => {
setFinalValues((prev) => ({
...prev,
baseUrl: evt.target.value,
}))
setFinalValues((prev) => ({ ...prev, baseUrl: evt.target.value }))
setInstallationData({
configuration: {
...finalValues,
baseUrl: evt.target.value,
},
configuration: { ...finalValues, baseUrl: evt.target.value },
serverConfiguration: {},
})
}}
@@ -61,7 +58,10 @@ export default function ConfigForm({
<FieldLabel version="v2" htmlFor="formatId">
Format Id for images
</FieldLabel>
<Help text="Images are fetched with a certain format. This should be an id from ImageVault" />
<Help
type="basic"
text="Images are fetched with a certain format. This should be an id from ImageVault"
/>
<TextInput
id="formatId"
name="formatId"
@@ -73,16 +73,10 @@ export default function ConfigForm({
version="v2"
width="large"
onChange={(evt: ChangeEvent<HTMLInputElement>) => {
setFinalValues((prev) => ({
...prev,
formatId: evt.target.value,
}))
setFinalValues((prev) => ({ ...prev, formatId: evt.target.value }))
setInstallationData({
configuration: {
...finalValues,
formatId: evt.target.value,
},
configuration: { ...finalValues, formatId: evt.target.value },
serverConfiguration: {},
})
}}

5
remix/app/components/ImageEditModal.tsx
View File

@@ -129,6 +129,11 @@ export default function ImageEditModal({
disabled
/>
</FieldComponent>
<FieldComponent>
<FieldLabel htmlFor="imageVaultId">Imagevault Id</FieldLabel>
<TextInput value={fieldData.Id} name="imageVaultId" disabled />
</FieldComponent>
</div>
</ModalBody>
<ModalFooter>

32
remix/app/components/ImageVaultDAM.tsx
View File

@@ -8,7 +8,6 @@ import {
cbModal,
} from "@contentstack/venus-components"
import { isInsertResponse, openImageVault } from "~/utils/imagevault"
import FullSizeImage from "./FullSizeImage"
import ImageEditModal from "./ImageEditModal"
import type UiLocation from "@contentstack/app-sdk/dist/src/uiLocation"
@@ -19,6 +18,7 @@ import type {
EntryDataPublishDetails,
ImageVaultDAMConfig,
} from "~/utils/imagevault"
import FullSizeImage from "./FullSizeImage"
export type ImageVaultDAMProps = {
sdk: UiLocation
@@ -26,9 +26,7 @@ export type ImageVaultDAMProps = {
initialData: InsertResponse | null
}
type DAMButtonProps = {
onClick: () => void
}
type DAMButtonProps = { onClick: () => void }
function DAMButton({ onClick }: DAMButtonProps) {
return (
@@ -60,7 +58,7 @@ function Media({ media, onDelete, onEdit }: MediaProps) {
media.MediaConversions[0]
const assetUrl = Url
const title = media.Name
const title = `Id: ${media.Id} - ${media.Name}`
const width = FormatWidth || Width
const height = FormatHeight || Height
const alt =
@@ -130,7 +128,7 @@ export default function ImageVaultDAM({
if (frame?.updateHeight) {
// We need to recalculate the height of the iframe when an image is added.
// Cannot use flushSync inside useEffect.
setTimeout(() => frame.updateHeight(document.body.scrollHeight), 0)
setTimeout(() => frame.updateHeight(), 0)
}
}, [frame])
@@ -139,14 +137,10 @@ export default function ImageVaultDAM({
if (field) {
flushSync(() => {
const data = result
? {
...result,
FocalPoint: result.FocalPoint || { x: 50, y: 50 },
}
? { ...result, FocalPoint: result.FocalPoint || { x: 50, y: 50 } }
: null
setMedia(data)
// Data inside the field is supposed to be an empty object if nothing is selected
field.setData(data || {})
field.setData(data)
document.body.style.overflow = "hidden"
})
}
@@ -175,11 +169,7 @@ export default function ImageVaultDAM({
modalProps: {
size: "max",
style: {
content: {
maxHeight: "90dvh",
maxWidth: "90dvw",
width: "auto",
},
content: { maxHeight: "90dvh", maxWidth: "90dvw", width: "auto" },
overlay: {},
},
},
@@ -204,23 +194,17 @@ export default function ImageVaultDAM({
}
return (
<div>
<div>
<FieldLabel htmlFor="imagevaultpicker" version="v2">
ImageVault Asset
</FieldLabel>
</div>
{media ? (
<Media media={media} onDelete={handleMedia} onEdit={handleEdit} />
) : (
<DAMButton
onClick={() => {
openImageVault({
config,
entryData,
onSuccess: handleMedia,
})
openImageVault({ config, entryData, onSuccess: handleMedia })
}}
/>
)}

9
remix/app/hooks/useApp.ts
View File

@@ -1,10 +1,10 @@
import UiLocation from "@contentstack/app-sdk/dist/src/uiLocation"
import { useEffect, useState } from "react"
import { useEffect, useRef, useState } from "react"
export class SDKLoadingError extends Error {}
export default function useApp() {
const modalElementId = "field"
const ref = useRef<HTMLDivElement>(null)
const [, setError] = useState()
const [sdk, setSdk] = useState<UiLocation>()
const [config, setConfig] = useState<Record<string, string>>()
@@ -20,8 +20,7 @@ export default function useApp() {
const config = await initSdk.getConfig()
setConfig(config)
const iframeWrapperRef = document.getElementById(modalElementId)
window.iframeRef = iframeWrapperRef
window.iframeRef = ref.current
window.postRobot = initSdk.postRobot
} catch (e) {
let err: Error
@@ -43,6 +42,6 @@ export default function useApp() {
return {
sdk,
config,
modalElementId,
ref,
}
}

49
remix/app/routes/field.tsx
View File

@@ -1,3 +1,5 @@
import "@contentstack/venus-components/build/main.css"
import { Suspense, lazy, useEffect, useState } from "react"
import { useScript } from "usehooks-ts"
import useApp from "~/hooks/useApp"
@@ -5,19 +7,26 @@ import useApp from "~/hooks/useApp"
import Disclaimer from "~/components/Disclaimer"
import InvalidConfig from "~/components/InvalidConfig"
import { isImageVaultDAMConfig } from "~/utils/imagevault"
import { GenericObjectType } from "@contentstack/app-sdk/dist/src/types/common.types"
import UiLocation from "@contentstack/app-sdk/dist/src/uiLocation"
import type { InsertResponse } from "~/types/imagevault"
import { isImageVaultDAMConfig } from "~/utils/imagevault"
const ImageVaultDAM = lazy(() => import("~/components/ImageVaultDAM"))
export default function Field() {
const { sdk, config: appConfig, modalElementId } = useApp()
interface FieldContentProps {
sdk?: UiLocation
appConfig?: GenericObjectType
}
function FieldContent({ sdk, appConfig }: FieldContentProps) {
const ivStatus = useScript(
"/scripts/imagevault-insert-media/insertmediawindow.min.js"
)
const [showDisclaimer, setShowDisclaimer] = useState(false)
const [fieldData, setFieldData] = useState<InsertResponse>()
const [fieldData, setFieldData] = useState<InsertResponse | null>()
const [dataIsLoaded, setDataIsLoaded] = useState(false)
const entry = sdk?.location.CustomField?.entry
const field = sdk?.location.CustomField?.field
@@ -31,14 +40,19 @@ export default function Field() {
if (field && entry) {
const data = field.getData()
const title = entry.getField("title").getData().toString()
if (data && title) {
setFieldData(data as InsertResponse)
} else {
throw new Error("Missing data or title for entry")
if (!title) {
throw new Error("Missing title for entry")
}
if (data) {
setFieldData(data as InsertResponse)
}
setDataIsLoaded(true)
}
} catch (e) {
setShowDisclaimer(true)
console.log("Unable to get field data from SDK: ", e)
}
}, [entry, field])
@@ -46,13 +60,13 @@ export default function Field() {
return <Disclaimer />
}
const loaded = !!(fieldData && ivStatus === "ready" && sdk && appConfig)
const loaded = !!(dataIsLoaded && ivStatus === "ready" && sdk && appConfig)
const initialData =
fieldData && Object.keys(fieldData).length > 0 ? fieldData : null
if (!loaded) {
return <p style={{ fontFamily: "Inter" }}> Loading dependecies...</p>
return <p style={{ fontFamily: "Inter" }}> Loading dependencies...</p>
}
if (!isImageVaultDAMConfig(appConfig)) {
@@ -60,16 +74,21 @@ export default function Field() {
}
const fieldConfig = sdk.location.CustomField?.fieldConfig
const config = {
...appConfig,
...fieldConfig,
}
const config = { ...appConfig, ...fieldConfig }
return (
<div id={modalElementId}>
<Suspense fallback={<p>Loading field...</p>}>
<ImageVaultDAM config={config} sdk={sdk} initialData={initialData} />
</Suspense>
)
}
export default function Field() {
const { sdk, config, ref } = useApp()
return (
<div ref={ref}>
<FieldContent sdk={sdk} appConfig={config} />
</div>
)
}

1
remix/env.d.ts vendored
View File

@@ -1,2 +1 @@
/// <reference types="@remix-run/node" />
/// <reference types="vite/client" />

133
remix/eslint.config.mjs Normal file
View File

@@ -0,0 +1,133 @@
import { fixupConfigRules, fixupPluginRules } from "@eslint/compat"
import { FlatCompat } from "@eslint/eslintrc"
import js from "@eslint/js"
import typescriptEslint from "@typescript-eslint/eslint-plugin"
import tsParser from "@typescript-eslint/parser"
import _import from "eslint-plugin-import"
import jsxA11Y from "eslint-plugin-jsx-a11y"
import react from "eslint-plugin-react"
import { defineConfig, globalIgnores } from "eslint/config"
import globals from "globals"
import path from "node:path"
import { fileURLToPath } from "node:url"
const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)
const compat = new FlatCompat({
baseDirectory: __dirname,
recommendedConfig: js.configs.recommended,
allConfig: js.configs.all,
})
export default defineConfig([
globalIgnores(["build/**/*", "node_modules/**/*", "public/**/*"]),
{
extends: compat.extends("eslint:recommended"),
languageOptions: {
globals: {
...globals.browser,
...globals.commonjs,
},
ecmaVersion: "latest",
sourceType: "module",
parserOptions: {
ecmaFeatures: {
jsx: true,
},
},
},
},
{
files: ["**/*.{js,jsx,ts,tsx}"],
extends: fixupConfigRules(
compat.extends(
"plugin:react/recommended",
"plugin:react/jsx-runtime",
"plugin:react-hooks/recommended",
"plugin:jsx-a11y/recommended"
)
),
plugins: {
react: fixupPluginRules(react),
"jsx-a11y": fixupPluginRules(jsxA11Y),
},
settings: {
react: {
version: "detect",
},
formComponents: ["Form"],
linkComponents: [
{
name: "Link",
linkAttribute: "to",
},
{
name: "NavLink",
linkAttribute: "to",
},
],
"import/resolver": {
typescript: {
project: "./remix/tsconfig.json",
},
},
},
rules: {
"react/jsx-uses-vars": "error",
"react/jsx-uses-react": "error",
},
},
{
files: ["**/*.{ts,tsx}"],
extends: fixupConfigRules(
compat.extends(
"plugin:@typescript-eslint/recommended",
"plugin:import/recommended",
"plugin:import/typescript"
)
),
plugins: {
"@typescript-eslint": fixupPluginRules(typescriptEslint),
import: fixupPluginRules(_import),
},
languageOptions: {
parser: tsParser,
},
settings: {
"import/internal-regex": "^~/",
"import/resolver": {
node: {
extensions: [".ts", ".tsx"],
},
typescript: {
alwaysTryTypes: true,
},
},
},
},
{
files: ["**/.eslintrc.cjs"],
languageOptions: {
globals: {
...globals.node,
},
},
},
])

10
remix/package.json
View File

@@ -12,14 +12,14 @@
"typecheck": "tsc"
},
"dependencies": {
"@remix-run/node": "^2.13.1",
"@remix-run/react": "^2.13.1",
"usehooks-ts": "^3.1.0"
"@remix-run/node": "^2.16.8",
"@remix-run/react": "^2.16.8",
"usehooks-ts": "^3.1.1"
},
"devDependencies": {
"@remix-run/dev": "^2.13.1"
"@remix-run/dev": "^2.16.8"
},
"engines": {
"node": ">=18.0.0"
"node": ">=22.0.0"
}
}

2
remix/tsconfig.json
View File

@@ -10,6 +10,8 @@
"**/*.tsx"
],
"compilerOptions": {
"types": ["@remix-run/node", "vite/client"],
"skipLibCheck": true,
"jsx": "react-jsx",
"baseUrl": ".",
"paths": {

12
remix/vite.config.ts
View File

@@ -1,15 +1,15 @@
import { vitePlugin as remix } from "@remix-run/dev"
import { defineConfig } from "vite"
import devtoolsJson from "vite-plugin-devtools-json"
import { libInjectCss } from "vite-plugin-lib-inject-css"
import tsconfigPaths from "vite-tsconfig-paths"
export default defineConfig({
plugins: [
remix({
ssr: false,
}),
remix({ ssr: false }),
tsconfigPaths(),
libInjectCss(),
devtoolsJson(),
],
build: {
emptyOutDir: true,
},
build: { emptyOutDir: true },
})

90
rte/.eslintrc.cjs
View File

@@ -1,90 +0,0 @@
/**
* This is intended to be a basic starting point for linting in your app.
* It relies on recommended configs out of the box for simplicity, but you can
* and should modify this configuration to best suit your team's needs.
*/
/** @type {import('eslint').Linter.Config} */
module.exports = {
root: true,
parserOptions: {
ecmaVersion: "latest",
sourceType: "module",
ecmaFeatures: {
jsx: true,
},
},
env: {
browser: true,
commonjs: true,
es6: true,
},
ignorePatterns: ["node_modules/**/*"],
// Base config
extends: ["eslint:recommended"],
overrides: [
// React
{
files: ["**/*.{js,jsx,ts,tsx}"],
plugins: ["react", "jsx-a11y"],
rules: {
"react/jsx-uses-vars": "error",
"react/jsx-uses-react": "error",
},
extends: [
"plugin:react/recommended",
"plugin:react/jsx-runtime",
"plugin:react-hooks/recommended",
"plugin:jsx-a11y/recommended",
],
settings: {
react: {
version: "detect",
},
formComponents: ["Form"],
linkComponents: [
{ name: "Link", linkAttribute: "to" },
{ name: "NavLink", linkAttribute: "to" },
],
"import/resolver": {
typescript: {
project: "./rte/tsconfig.json",
},
},
},
},
// Typescript
{
files: ["**/*.{ts,tsx}"],
plugins: ["@typescript-eslint", "import"],
parser: "@typescript-eslint/parser",
settings: {
"import/internal-regex": "^~/",
"import/resolver": {
node: {
extensions: [".ts", ".tsx"],
},
typescript: {
alwaysTryTypes: true,
},
},
},
extends: [
"plugin:@typescript-eslint/recommended",
"plugin:import/recommended",
"plugin:import/typescript",
],
},
// Node
{
files: [".eslintrc.cjs"],
env: {
node: true,
},
},
],
}

1
rte/components/ImageEditModal.tsx
View File

@@ -178,6 +178,7 @@ export default function ImageEditModal({
/>
<div>
<Field>
{/* @ts-expect-error: Type incompatibility with Venus components */}
<Select
selectLabel="Alignment"
value={alignment}

133
rte/eslint.config.mjs Normal file
View File

@@ -0,0 +1,133 @@
import { fixupConfigRules, fixupPluginRules } from "@eslint/compat"
import { FlatCompat } from "@eslint/eslintrc"
import js from "@eslint/js"
import typescriptEslint from "@typescript-eslint/eslint-plugin"
import tsParser from "@typescript-eslint/parser"
import _import from "eslint-plugin-import"
import jsxA11Y from "eslint-plugin-jsx-a11y"
import react from "eslint-plugin-react"
import { defineConfig, globalIgnores } from "eslint/config"
import globals from "globals"
import path from "node:path"
import { fileURLToPath } from "node:url"
const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)
const compat = new FlatCompat({
baseDirectory: __dirname,
recommendedConfig: js.configs.recommended,
allConfig: js.configs.all,
})
export default defineConfig([
globalIgnores(["node_modules/**/*"]),
{
extends: compat.extends("eslint:recommended"),
languageOptions: {
globals: {
...globals.browser,
...globals.commonjs,
},
ecmaVersion: "latest",
sourceType: "module",
parserOptions: {
ecmaFeatures: {
jsx: true,
},
},
},
},
{
files: ["**/*.{js,jsx,ts,tsx}"],
extends: fixupConfigRules(
compat.extends(
"plugin:react/recommended",
"plugin:react/jsx-runtime",
"plugin:react-hooks/recommended",
"plugin:jsx-a11y/recommended"
)
),
plugins: {
react: fixupPluginRules(react),
"jsx-a11y": fixupPluginRules(jsxA11Y),
},
settings: {
react: {
version: "detect",
},
formComponents: ["Form"],
linkComponents: [
{
name: "Link",
linkAttribute: "to",
},
{
name: "NavLink",
linkAttribute: "to",
},
],
"import/resolver": {
typescript: {
project: "./rte/tsconfig.json",
},
},
},
rules: {
"react/jsx-uses-vars": "error",
"react/jsx-uses-react": "error",
},
},
{
files: ["**/*.{ts,tsx}"],
extends: fixupConfigRules(
compat.extends(
"plugin:@typescript-eslint/recommended",
"plugin:import/recommended",
"plugin:import/typescript"
)
),
plugins: {
"@typescript-eslint": fixupPluginRules(typescriptEslint),
import: fixupPluginRules(_import),
},
languageOptions: {
parser: tsParser,
},
settings: {
"import/internal-regex": "^~/",
"import/resolver": {
node: {
extensions: [".ts", ".tsx"],
},
typescript: {
alwaysTryTypes: true,
},
},
},
},
{
files: ["**/.eslintrc.cjs"],
languageOptions: {
globals: {
...globals.node,
},
},
},
])

4
rte/main.tsx
View File

@@ -103,7 +103,7 @@ function extractContentstackEmbeddedData(
plugin,
}
} catch (e) {
console.log(`Unable to parse JWT like: ${jwtLike}`)
console.log(`Unable to parse JWT like: ${jwtLike}`, e)
}
return null
}
@@ -180,7 +180,7 @@ async function init() {
if (rte) {
const savedSelection = rte?.selection?.get() ?? undefined
const appConfig = await rte.getConfig()
const appConfig = rte.getConfig()
// This is the configuration for this instance of the plugin.
// You edit this in the content types settings RTE plugin section.

6
rte/package.json
View File

@@ -6,14 +6,14 @@
"scripts": {
"build": "vite build",
"dev": "IS_DEV=true vite build --watch",
"lint": "eslint --ignore-path ../.gitignore --cache --cache-location ./node_modules/.cache/eslint .",
"lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
"prebuild": "concurrently npm:lint npm:typecheck",
"typecheck": "tsc"
},
"devDependencies": {
"@types/systemjs": "^6.15.1"
"@types/systemjs": "^6.15.3"
},
"engines": {
"node": ">=18.0.0"
"node": ">=22.0.0"
}
}

11
rte/vite.config.ts
View File

@@ -1,13 +1,12 @@
import { resolve } from "path"
import { defineConfig } from "vite"
import devtoolsJson from "vite-plugin-devtools-json"
import { libInjectCss } from "vite-plugin-lib-inject-css"
import tsconfigPaths from "vite-tsconfig-paths"
export default defineConfig({
plugins: [tsconfigPaths(), libInjectCss()],
define: {
IS_DEV: process.env.IS_DEV === "true" ? true : false,
},
plugins: [tsconfigPaths(), libInjectCss(), devtoolsJson()],
define: { IS_DEV: process.env.IS_DEV === "true" ? true : false },
publicDir: false,
build: {
sourcemap: process.env.IS_DEV ? "inline" : "hidden",
@@ -20,9 +19,7 @@ export default defineConfig({
},
rollupOptions: {
external: ["react", "react-dom", "@contentstack/venus-components"],
output: {
dir: "../remix/public/build/rte",
},
output: { dir: "../remix/public/build/rte" },
},
},
})