fix: read app.viewstools and respect its keys

ensure-is-media.js

@@ -1,59 +1,71 @@
 import { promises as fs } from 'fs'
 import path from 'path'
+import prettier from 'prettier'
 
-let makeUseIsMedia = ({
-  mobile,
-  tablet,
-  laptop,
-}) => `// This file is automatically generated by Views and will be overwritten
+let makeUseIsMedia = media => `// This file is automatically generated by Views and will be overwritten
 // when the morpher runs. If you want to contribute to how it's generated, eg,
 // improving the algorithms inside, etc, see this:
 // https://github.com/viewstools/morph/blob/master/ensure-is-media.js
 
 import { useMedia } from 'use-media';
 
-let useIsMedia = () => {
-  let mobile = useMedia({ minWidth: 0, maxWidth: ${mobile.width} })
-  let tablet = useMedia({ minWidth: ${mobile.width + 1}, maxWidth: ${
-  tablet.width
-} })
-  let laptop = useMedia({ minWidth: ${tablet.width + 1}, maxWidth: ${
-  laptop.width
-} })
-  let desktop = useMedia({ minWidth: ${laptop.width + 1} })
-
-  return {
-    mobile,
-    tablet,
-    laptop,
-    desktop,
-  }
-}
+let useIsMedia = () => ({
+  ${media
+    .map(({ name, minWidth, maxWidth }) => {
+      let ret = [`"${name}": useMedia({ minWidth: ${minWidth}`]
+      if (maxWidth) {
+        ret.push(`, maxWidth: ${maxWidth}`)
+      }
+      ret.push('})')
+      return ret.join('')
+    })
+    .join(',')}
+})
 export default useIsMedia`
 
 async function getMediaConfig(src) {
+  let media = {
+    mobile: {
+      width: 414,
+    },
+    tablet: {
+      width: 1024,
+    },
+    laptop: {
+      width: 1280,
+    },
+  }
   try {
-    return JSON.parse(
-      await fs.readFile(path.join(src, 'app.viewstools'), 'utf8')
+    media = JSON.parse(
+      await fs.readFile(
+        path.resolve(path.join(src, '..', 'app.viewstools')),
+        'utf8'
+      )
     ).media
-  } catch (error) {
-    return {
-      mobile: {
-        width: 375,
-      },
-      tablet: {
-        width: 1024,
-      },
-      laptop: {
-        width: 1280,
-      },
-    }
-  }
+    delete media.base
+  } catch (error) {}
+
+  return Object.entries(media)
+    .sort((a, b) => a[1].width - b[1].width)
+    .map(([name, item], index, list) => ({
+      name,
+      minWidth: index === 0 ? 0 : list[index - 1][1].width + 1,
+      maxWidth:
+        index === 0
+          ? item.width
+          : index === list.length - 1
+          ? null
+          : item.width,
+    }))
 }
 
 export default async function ensureIsMedia({ src }) {
   return {
     file: path.join(src, 'useIsMedia.js'),
-    content: makeUseIsMedia(await getMediaConfig(src)),
+    content: prettier.format(makeUseIsMedia(await getMediaConfig(src)), {
+      parser: 'babel',
+      singleQuote: true,
+      trailingComma: 'es5',
+    }),
   }
 }

parse/index.js

@@ -537,12 +537,7 @@ That would mean that SomeView in ${block.name} will be replaced by ${block.name}
 
             if (slotName === 'isBefore') {
               useIsBefore = true
-            } else if (
-              slotName === 'isMediaMobile' ||
-              slotName === 'isMediaTablet' ||
-              slotName === 'isMediaLaptop' ||
-              slotName === 'isMediaDesktop'
-            ) {
+            } else if (/!?isMedia.+/.test(slotName)) {
               scope.value = `isMedia.${slotName
                 .replace('isMedia', '')
                 .toLowerCase()}`