Backmerge: #1959: SDF files are not available as part of npm ketcher-react package

packages/ketcher-react/package.json

@@ -125,6 +125,7 @@
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-typescript2": "^0.31.1",
     "rollup-plugin-visualizer": "^5.5.2",
     "stylelint": "13.13.1",

packages/ketcher-react/rollup.config.js

@@ -16,6 +16,7 @@ import strip from '@rollup/plugin-strip'
 import svgr from '@svgr/rollup'
 import typescript from 'rollup-plugin-typescript2'
 import { license } from '../../license.ts'
+import { string } from 'rollup-plugin-string'
 
 const mode = {
   PRODUCTION: 'production',
@@ -98,7 +99,10 @@ const config = {
       comments: 'none',
       include: includePattern
     }),
-    ...(isProduction ? [strip({ include: includePattern })] : [])
+    ...(isProduction ? [strip({ include: includePattern })] : []),
+    string({
+      include: '**/*.sdf'
+    })
   ]
 }
 

packages/ketcher-react/src/script/ui/App/App.tsx

@@ -30,7 +30,7 @@ import Editor from '../views/Editor'
 import classes from './App.module.less'
 import { initFGTemplates } from '../state/functionalGroups'
 import { initSaltsAndSolventsTemplates } from '../state/saltsAndSolvents'
-import { useSettingsContext, useSubscriptionOnEvents } from '../../../hooks'
+import { useSubscriptionOnEvents } from '../../../hooks'
 
 interface AppCallProps {
   checkServer: () => void
@@ -51,14 +51,13 @@ type Props = AppCallProps
 const App = (props: Props) => {
   const dispatch = useDispatch()
   const { checkServer } = props
-  const { staticResourcesUrl } = useSettingsContext()
 
   useSubscriptionOnEvents()
 
   useEffect(() => {
     checkServer()
-    dispatch(initFGTemplates(staticResourcesUrl))
-    dispatch(initSaltsAndSolventsTemplates(staticResourcesUrl))
+    dispatch(initFGTemplates())
+    dispatch(initSaltsAndSolventsTemplates())
     window.scrollTo(0, 0)
   }, [])
 

packages/ketcher-react/src/script/ui/state/functionalGroups/index.ts

@@ -22,7 +22,7 @@ import {
   SdfSerializer,
   Struct
 } from 'ketcher-core'
-import { prefetchStatic } from '../templates/init-lib'
+import templatesRawData from '../../../../templates/fg.sdf'
 
 interface FGState {
   lib: []
@@ -62,14 +62,11 @@ export function highlightFG(dispatch, group: any) {
   dispatch(highlightFGroup(group))
 }
 
-export function initFGTemplates(baseUrl: string) {
+export function initFGTemplates() {
   return async (dispatch) => {
-    const fileName = 'fg.sdf'
-    const url = `${baseUrl}/templates/${fileName}`
     const provider = FunctionalGroupsProvider.getInstance()
     const sdfSerializer = new SdfSerializer()
-    const text = await prefetchStatic(url)
-    const templates = sdfSerializer.deserialize(text)
+    const templates = sdfSerializer.deserialize(templatesRawData)
     const functionalGroups = templates.reduce(
       (acc: Struct[], { struct }) => [...acc, struct],
       []

packages/ketcher-react/src/script/ui/state/saltsAndSolvents/index.ts

@@ -23,8 +23,8 @@ import {
   SdfSerializer,
   Struct
 } from 'ketcher-core'
-import { prefetchStatic } from '../templates/init-lib'
 import { RenderStruct } from '../../utils'
+import templatesRawData from '../../../../templates/salts-and-solvents.sdf'
 
 interface SaltsAndSolventsState {
   lib: []
@@ -68,16 +68,13 @@ const prerenderPartOfStructures = (saltsAndSolvents: Struct[], settings) => {
   })
 }
 
-export function initSaltsAndSolventsTemplates(baseUrl: string) {
+export function initSaltsAndSolventsTemplates() {
   return async (dispatch, getState) => {
-    const fileName = 'salts-and-solvents.sdf'
     const { settings } = getState().options
-    const url = `${baseUrl}/templates/${fileName}`
     const saltsAndSolventsProvider = SaltsAndSolventsProvider.getInstance()
     const functionalGroupsProvider = FunctionalGroupsProvider.getInstance()
     const sdfSerializer = new SdfSerializer()
-    const text = await prefetchStatic(url)
-    const templates = sdfSerializer.deserialize(text)
+    const templates = sdfSerializer.deserialize(templatesRawData)
     const saltsAndSolvents = templates.reduce(
       (acc: Struct[], { struct, props }) => {
         struct.abbreviation = String(props.abbreviation)

packages/ketcher-react/src/script/ui/state/templates/init-lib.js

@@ -18,6 +18,7 @@ import { KetSerializer, SdfSerializer } from 'ketcher-core'
 
 import { appUpdate } from '../options'
 import { storage } from '../../storage-ext'
+import templatesRawData from '../../../../templates/library.sdf'
 
 export function initLib(lib) {
   return {
@@ -37,21 +38,19 @@ export default function initTmplLib(dispatch, baseUrl, cacheEl) {
 
 const deserializeSdfTemplates = (baseUrl, cacheEl, fileName) => {
   const sdfSerializer = new SdfSerializer()
-  return prefetchStatic(`${baseUrl}/templates/${fileName}`).then((text) => {
-    const tmpls = sdfSerializer.deserialize(text)
-    const prefetch = prefetchRender(tmpls, baseUrl + '/templates/', cacheEl)
-
-    return prefetch.then((cachedFiles) =>
-      tmpls.map((tmpl) => {
-        const pr = prefetchSplit(tmpl)
-        if (pr.file)
-          tmpl.props.prerender =
-            cachedFiles.indexOf(pr.file) !== -1 ? `#${pr.id}` : ''
-
-        return tmpl
-      })
-    )
-  })
+  const tmpls = sdfSerializer.deserialize(templatesRawData)
+  const prefetch = prefetchRender(tmpls, baseUrl + '/templates/', cacheEl)
+
+  return prefetch.then((cachedFiles) =>
+    tmpls.map((tmpl) => {
+      const pr = prefetchSplit(tmpl)
+      if (pr.file)
+        tmpl.props.prerender =
+          cachedFiles.indexOf(pr.file) !== -1 ? `#${pr.id}` : ''
+
+      return tmpl
+    })
+  )
 }
 
 function userTmpls() {

packages/ketcher-react/src/typings.d.ts

@@ -5,6 +5,11 @@ declare module '*.less' {
   export default classes
 }
 
+declare module '*.sdf' {
+  const content: string
+  export default content
+}
+
 declare namespace NodeJS {
   export interface ProcessEnv {
     VERSION: string

yarn.lock

@@ -11414,6 +11414,7 @@ __metadata:
     rollup-plugin-delete: ^2.0.0
     rollup-plugin-peer-deps-external: ^2.2.4
     rollup-plugin-postcss: ^4.0.2
+    rollup-plugin-string: ^3.0.0
     rollup-plugin-typescript2: ^0.31.1
     rollup-plugin-visualizer: ^5.5.2
     stylelint: 13.13.1
@@ -15722,6 +15723,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rollup-plugin-string@npm:^3.0.0":
+  version: 3.0.0
+  resolution: "rollup-plugin-string@npm:3.0.0"
+  dependencies:
+    rollup-pluginutils: ^2.4.1
+  checksum: f46b4088f2534b94ea638aedae819cd8bc67803a88a2ed8e10598bc463f7765278c21dc51b00013b8f9c9ff8478a4747b51e802d633c2be31de14fbb5bd36d07
+  languageName: node
+  linkType: hard
+
 "rollup-plugin-terser@npm:^7.0.0":
   version: 7.0.2
   resolution: "rollup-plugin-terser@npm:7.0.2"
@@ -15778,7 +15788,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rollup-pluginutils@npm:^2.8.1, rollup-pluginutils@npm:^2.8.2":
+"rollup-pluginutils@npm:^2.4.1, rollup-pluginutils@npm:^2.8.1, rollup-pluginutils@npm:^2.8.2":
   version: 2.8.2
   resolution: "rollup-pluginutils@npm:2.8.2"
   dependencies: