fixed craft and grapes

lib/client/craft/utils/fetch.ts

@@ -28,7 +28,7 @@ export { getImageUrl }
 const fetchJSON = async ({ method, url, data }: fetchJSONArgs): Promise<templateData> => {
   const res = await fetch(url, {
     method,
-    headers: { 'Content-Type': 'application/json' },
+    headers: { 'Content-Type': 'text/plain' },
     body: data ? JSON.stringify(data) : undefined,
   })
   return await res.json()
@@ -60,7 +60,7 @@ const loadTemplate = async (standaloneServer: boolean) => {
   const baseUrl = getBaseUrl(standaloneServer)
   const data = await fetchJSON({
     method: 'get',
-    url: `${baseUrl}/api/builder/handle?type=data&path=${location.pathname}`,
+    url: `${baseUrl}/api/builder/handle?type=data&path=${location.pathname}&ext=json`,
   })
   return data?.content
 }
@@ -72,7 +72,7 @@ const saveTemplate = async (state: any, standaloneServer: boolean) => {
 
   await fetchJSON({
     method: 'post',
-    url: `${baseUrl}/api/builder/handle?type=data&path=${location.pathname}`,
+    url: `${baseUrl}/api/builder/handle?type=data&path=${location.pathname}&ext=json`,
     data: body,
   })
 }

lib/client/grapes/utils/index.ts

@@ -9,13 +9,13 @@ type fetchJSONArgs = {
 const elementExists = (el: any) => typeof el !== 'undefined' && el !== null
 export { elementExists }
 
-const fetchJSON = async ({ method, url, data }: fetchJSONArgs): Promise<JSON> => {
+const fetchJSON = async ({ method, url, data }: fetchJSONArgs): Promise<string> => {
   const res = await fetch(url, {
     method,
-    headers: { 'Content-Type': 'application/json' },
+    headers: { 'Content-Type': 'text/plain' },
     body: data ? JSON.stringify(data) : undefined,
   })
-  return await res.json()
+  return res.text()
 }
 
 export { fetchJSON }
@@ -58,14 +58,13 @@ const getBaseUrl = (standaloneServer: boolean) => {
   return standaloneServer ? `http://localhost:${standaloneServerPort}` : ''
 }
 
-const saveTemplate = async (state: any, standaloneServer: boolean) => {
+const saveTemplate = async (data: any, standaloneServer: boolean) => {
   const baseUrl = getBaseUrl(standaloneServer)
-  const body = { data: state }
 
   await fetchJSON({
     method: 'post',
-    url: `${baseUrl}/api/builder/handle?type=data&path=${location.pathname}`,
-    data: body,
+    url: `${baseUrl}/api/builder/handle?type=data&path=${location.pathname}&ext=json`,
+    data: data,
   })
 }
 export { saveTemplate }
@@ -74,9 +73,10 @@ const loadTemplate = async (standaloneServer: boolean) => {
   const baseUrl = getBaseUrl(standaloneServer)
   const data = (await fetchJSON({
     method: 'get',
-    url: `${baseUrl}/api/builder/handle?type=data&path=${location.pathname}`,
+    url: `${baseUrl}/api/builder/handle?type=data&path=${location.pathname}&ext=json`,
   })) as any
-  return data?.content
+  console.log(data)
+  return data
 }
 export { loadTemplate }
 

lib/server/api/handle.ts

@@ -27,23 +27,21 @@ const uploadFiles = async (req: NextApiRequest): Promise<string[]> => {
   form.on('fileBegin', (_, file) => (file.path = path.join('public', uploadFolder, file.name!)))
   const files = await formParse(form, req)
 
-  const urls = Object.values(files).map((f) =>
-    path.join(path.sep, uploadFolder, (<FormidableFile>f).name ?? ''),
-  )
+  const urls = Object.values(files).map((f) => path.join(path.sep, uploadFolder, (<FormidableFile>f).name ?? ''))
   return urls
 }
 export { uploadFiles }
 
-const getFileNameFromRoute = (route: string) => (route === '/' ? 'default.html' : `${route}.html`) // browser paths are always "/"
+const getFileNameFromRoute = (route: string) => (route === '/' ? 'default' : route) // browser paths are always "/"
 const getRouteFromFilename = (filename: string) =>
-  filename === path.sep + 'default.html' ? path.sep : `${filename.slice(0, -5)}` // file paths are OS-specific
+  filename.slice(0, -5) === path.sep + 'default' ? path.sep : filename // file paths are OS-specific
 
-const loadData = async (route: string): Promise<string> => {
+const loadData = async (route: string, ext: string): Promise<string> => {
   const fileName = getFileNameFromRoute(route)
-  const dataPath = path.join(rootPath, dataFolder, fileName)
+  const dataPath = path.join(rootPath, dataFolder, `${fileName}.${ext}`)
   const dataExists = await exists(dataPath)
   if (!dataExists) {
-    return '<div>hello</div>'
+    return ext === 'json' ? '{}' : '<div>Not found</div>'
   } else {
     const content = fs.readFileSync(dataPath, 'utf8')
     return content
@@ -73,7 +71,7 @@ const loadAllData = async (): Promise<dataType[]> => {
 }
 export { loadAllData }
 
-const updateData = async (route: string, data: string): Promise<void> => {
+const updateData = async (route: string, ext: string, data: string): Promise<void> => {
   const fileName = getFileNameFromRoute(route)
 
   const updatePath = path.join(rootPath, dataFolder)
@@ -82,7 +80,7 @@ const updateData = async (route: string, data: string): Promise<void> => {
     await fs.promises.mkdir(updatePath)
   }
 
-  await fs.promises.writeFile(path.join(updatePath, fileName), data)
+  await fs.promises.writeFile(path.join(updatePath, `${fileName}.${ext}`), data)
 }
 export { updateData }
 
@@ -94,15 +92,15 @@ const handleData = async (req: NextApiRequest, res: NextApiResponse): Promise<vo
 
   // handle request
   if (req.method === 'GET') {
-    const data = await loadData(req.query.path as string)
+    const data = await loadData(req.query.path as string, (req.query.ext as string) ?? 'html')
     return res.status(200).send(data)
   } else if (req.method === 'POST') {
     const contentType = req.headers['content-type']!
     const isMultiPart = contentType.startsWith('multipart/form-data')
     if (!isMultiPart) {
       const body = await getPage(req)
-      await updateData(req.query.path as string, body)
-      return res.status(200).json({})
+      await updateData(req.query.path as string, (req.query.ext as string) ?? 'html', body)
+      return res.status(200).send('')
     } else {
       const urls = await uploadFiles(req)
       return res.status(200).json(urls)
@@ -142,9 +140,7 @@ const handleTheme = async (req: NextApiRequest, res: NextApiResponse): Promise<v
   // handle request
   const themeName = req.query.name as string
   const folderPath = path.join(getPackagePath() as string, 'themes', themeName)
-  const componentNames = await fs.promises
-    .readdir(folderPath)
-    .then((f) => f.filter((c) => c !== 'index.ts'))
+  const componentNames = await fs.promises.readdir(folderPath).then((f) => f.filter((c) => c !== 'index.ts'))
   const componentsP = componentNames.map(async (c) => {
     const assetPath = path.join(folderPath, c, 'index.html')
     const source = await fs.promises.readFile(assetPath, 'utf-8')