@viewstools/morph/bin.js

#!/usr/bin/env node
require('source-map-support').install();
'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

require('core-js/modules/es.promise');
var fs = require('fs');
var chalk = _interopDefault(require('chalk'));
var deleteEmpty = _interopDefault(require('delete-empty'));
var glob = _interopDefault(require('fast-glob'));
var path = _interopDefault(require('path'));
var minimist = _interopDefault(require('minimist'));
var updateNotifier = _interopDefault(require('update-notifier'));
var list = _interopDefault(require('google-fonts-complete/api-response.json'));
var sort = _interopDefault(require('bubblesort'));
require('core-js/modules/es.array.flat');
require('core-js/modules/es.array.unscopables.flat');
require('core-js/modules/es.object.from-entries');
var mm = _interopDefault(require('micromatch'));
var fsExtra = _interopDefault(require('fs-extra'));
var flatten = _interopDefault(require('flatten'));
var toCamelCase = _interopDefault(require('to-camel-case'));
var toSlugCase = _interopDefault(require('to-slug-case'));
var uniq = _interopDefault(require('array-uniq'));
var Levenshtein = _interopDefault(require('levenshtein'));
var sortBy = _interopDefault(require('lodash.sortby'));
var chokidar = _interopDefault(require('chokidar'));

async function clean(src, verbose) {
  let morphed = await glob(['**/*.view.js', `Fonts/*.js`, 'useFlow.js', 'useIsMedia.js', 'useIsBefore.js', 'useTools.js'], {
    bashNative: ['linux'],
    cwd: src,
    ignore: ['*node_modules*']
  });
  await Promise.all(morphed.map(f => {
    verbose && console.log(`x ${f}`);
    return fs.promises.unlink(path.join(src, f));
  }));
  let deleted = await deleteEmpty(src);

  if (verbose) {
    deleted.forEach(d => console.log(`x ${d}`));
  }
}

var name = "@viewstools/morph";
var version = "23.1.2";
var description = "Views language morpher";
var main = "bin.js";
var bin = {
	"views-morph": "./bin.js"
};
var scripts = {
	prepare: "cross-env NODE_ENV=production rollup --config rollup.config.js && chmod +x bin.js",
	test: "jest",
	"debug:issue": "npx nodemon -w bin.js -- bin.js issue/src --as react-dom --watch",
	watch: "rollup --config rollup.config.js --watch"
};
var repository = {
	type: "git",
	url: "git+https://github.com/viewstools/morph.git"
};
var author = "Darío Javier Cravero <dario@uxtemple.com>";
var license = "BSD-3-Clause";
var bugs = {
	url: "https://github.com/viewstools/morph/issues"
};
var homepage = "https://github.com/viewstools/morph#readme";
var devDependencies = {
	"@babel/core": "^7.3.4",
	"@babel/preset-env": "^7.3.4",
	"babel-eslint": "^10.0.1",
	"babel-jest": "^24.3.1",
	"cross-env": "^5.2.0",
	eslint: "^6.1.0",
	"eslint-plugin-import": "^2.3.0",
	husky: "^3.0.2",
	jest: "^24.3.1",
	"lint-staged": "^9.2.1",
	nodemon: "^2.0.2",
	rollup: "^1.6.0",
	"rollup-plugin-babel": "^4.3.2",
	"rollup-plugin-json": "^4.0.0"
};
var dependencies = {
	"array-uniq": "^2.0.0",
	bubblesort: "^1.0.1",
	chalk: "^2.3.0",
	chokidar: "^3.0.2",
	color: "^3.0.0",
	"core-js": "3",
	"delete-empty": "^3.0.0",
	"fast-glob": "^3.0.4",
	flatten: "^1.0.2",
	"fs-extra": "^8.0.1",
	"google-fonts-complete": "^1.1.1",
	"has-yarn": "^2.1.0",
	"i18n-locales": "^0.0.2",
	"latest-version": "^5.1.0",
	levenshtein: "^1.0.5",
	"lodash.sortby": "^4.7.0",
	micromatch: "^4.0.2",
	minimist: "^1.2.0",
	mz: "^2.6.0",
	"react-query": "^0.3.24",
	"read-pkg-up": "^6.0.0",
	"source-map-support": "^0.5.12",
	"to-camel-case": "^1.0.0",
	"to-pascal-case": "^1.0.0",
	"to-slug-case": "^1.0.0",
	"update-notifier": "^3.0.1",
	uuid: "^3.3.2"
};
var husky = {
	hooks: {
		"pre-commit": "lint-staged"
	}
};
var jest = {
	testEnvironment: "node"
};
var pkg = {
	name: name,
	version: version,
	description: description,
	main: main,
	bin: bin,
	"private": false,
	scripts: scripts,
	repository: repository,
	author: author,
	license: license,
	bugs: bugs,
	homepage: homepage,
	devDependencies: devDependencies,
	dependencies: dependencies,
	husky: husky,
	"lint-staged": {
	"*.js": [
		"prettier --trailing-comma es5 --single-quote --no-semi --write",
		"git add"
	]
},
	jest: jest
};

function addToMapSet(map, key, value) {
  if (!map.has(key)) {
    map.set(key, new Set());
  }

  map.get(key).add(value);
}

let getWeights = variants => variants.filter(v => !v.includes('italic')).map(v => v === 'regular' ? 400 : v);

let all = list.map(font => ({
  category: font.category,
  value: font.family,
  weights: getWeights(font.variants)
}));
let byName = {};
all.forEach(f => byName[f.value] = f);
let fontFamily = all.map(f => f.value);
let isGoogleFont = family => !!byName[family];
let maybeAddFallbackFont = f => {
  let font = byName[f];
  return font && font.category ? `${f}, ${font.category}` : f;
};

var morphFontAsReactDom = ((font, sources) => {
  let body;

  if (isGoogleFont(font.family)) {
    body = `injectGlobal("@import url('https://fonts.googleapis.com/css?family=${font.family.replace(/\s/g, '+')}:${font.weight}${font.style === 'italic' ? 'i' : ''}');body{}")`;
  } else {
    body = `${sources.map(src => `import ${src.type} from '${src.file}'`).join('\n')}

injectGlobal(\`@font-face {
  font-family: '${font.family}';
  font-style: ${font.style};
  font-weight: ${font.weight};
  src: ${sources.map(src => `url(\${${src.type}}) format('${src.type}')`).join(', ')};
}\`)`;
  }

  return `import { injectGlobal } from 'emotion'\n${body}`;
});

var morphFontAsReactNative = ((font, sources) => {
  // TODO implement
  return `export default "${font.id}"`; //   let body = `export default {\n`
  //   fonts.forEach(font => {
  //     body += `${sources
  //       .map(src => `'${font.id}': require('./${src.file}'),\n`)
  //       .join(',')}`
  //   })
  //   return `${body}}`
});

function relativise(from, to) {
  let r = path.relative(from, to).replace(/\\/g, '/');
  return r.substr(r.startsWith('../..') ? 3 : 1);
}

async function ensureDir(dir) {
  try {
    await fs.promises.mkdir(dir, {
      recursive: true
    });
  } catch (error) {}
}

let morphFont = {
  'react-dom': morphFontAsReactDom,
  'react-native': morphFontAsReactNative,
  'react-pdf': morphFontAsReactNative
};
async function ensureFontsDirectory(src) {
  await ensureDir(path.join(src, 'DesignSystem', 'Fonts'));
}
let getFontId = file => path.basename(file, path.extname(file));
let fontsOrder = ['eot', 'woff2', 'woff', 'ttf', 'svg', 'otf'];

let sortFonts = fonts => {
  return new Set(sort([...fonts], (a, b) => fontsOrder.indexOf(b.type) - fontsOrder.indexOf(a.type)));
};

function processCustomFonts({
  customFonts,
  filesFontCustom
}) {
  for (let file of filesFontCustom) {
    addToMapSet(customFonts, getFontId(file), file);
  }

  for (let [id, fonts] of customFonts) {
    customFonts.set(id, sortFonts(fonts));
  }
}
function morphAllFonts({
  as,
  customFonts,
  filesView,
  src,
  viewsToFiles
}) {
  let fontsDirectory = path.join(src, 'DesignSystem', 'Fonts');
  let fontsInUse = new Set();

  let mapCustomFont = file => ({
    type: FONT_TYPES[path.extname(file)],
    file: file.replace(fontsDirectory, '.')
  });

  for (let file of filesView) {
    let view = viewsToFiles.get(file);
    if (view.custom) continue;
    view.parsed.fonts.forEach(font => {
      fontsInUse.add(font.id);
    });
  }

  return [...fontsInUse].map(font => {
    let [family, weight, style = 'normal'] = font.split('-');
    let customFontSources = [];

    if (customFonts.has(font)) {
      customFontSources = [...customFonts.get(font)].map(mapCustomFont);
    }

    return {
      file: path.join(src, 'DesignSystem', 'Fonts', `${font}.js`),
      content: morphFont[as]({
        id: font,
        family,
        style,
        weight
      }, customFontSources)
    };
  });
} // let removeFont = file => {
//   let id = getFontId(file)
//   instance.customFonts = instance.customFonts.filter(font => font.id !== id)
// }

let FONT_TYPES = {
  '.otf': 'opentype',
  '.eot': 'eot',
  '.svg': 'svg',
  '.ttf': 'truetype',
  '.woff': 'woff',
  '.woff2': 'woff2'
};
let makeGetFontImport = src => (font, view) => `import "${relativise(view.file, path.join(src, 'DesignSystem', 'Fonts', `${font}.js`))}"`; // let isFont = f => Object.keys(FONT_TYPES).includes(path.extname(f))

let PATTERNS = {
  filesView: {
    match: ['**/view.blocks']
  },
  filesViewLogic: {
    match: ['**/logic.js']
  },
  filesViewCustom: {
    match: ['**/react.js']
  },
  filesFontCustom: {
    match: ['**/DesignSystem/Fonts/*.eot', '**/DesignSystem/Fonts/*.otf', '**/DesignSystem/Fonts/*.ttf', '**/DesignSystem/Fonts/*.svg', '**/DesignSystem/Fonts/*.woff', '**/DesignSystem/Fonts/*.woff2']
  }
}; // @ts-ignore

let isViewFile = async file => mm.isMatch(file, PATTERNS.filesView.match);
let isViewLogicFile = async file => // @ts-ignore
mm.isMatch(file, PATTERNS.filesViewLogic.match);
let isViewCustomFile = async file => // @ts-ignore
mm.isMatch(file, PATTERNS.filesViewCustom.match);
let isFontCustomFile = async file => // @ts-ignore
mm.isMatch(file, PATTERNS.filesFontCustom.match);
let MATCH = Object.values(PATTERNS).map(item => item.match).flat();
async function getMatchesPerPattern(files) {
  // @ts-ignore
  return Object.fromEntries((await Promise.all(Object.entries(PATTERNS).map(async ([key, {
    filter,
    match,
    ignore
  }]) => {
    let matches = mm(files, match, {
      ignore
    });

    if (typeof filter === 'function') {
      matches = await filter(matches);
    }

    return [key, new Set(matches)];
  }))));
}

async function getFiles(src) {
  let files = await glob(MATCH, {
    absolute: true,
    cwd: src,
    ignore: ['**/node_modules/**', '**/view.js']
  });
  return await getMatchesPerPattern(files);
}

async function ensureFile({
  file,
  content
}) {
  await ensureDir(path.dirname(file));
  return {
    file,
    content // content: prettier.format(content, {
    //   parser: 'babel',
    //   singleQuote: true,
    //   trailingComma: 'es5',
    // }),

  };
}

let DATA = `// 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-data.js
import * as fromValidate from './validate.js'
import * as fromFormat from './format.js'
// import get from 'dlv';
import get from 'lodash/get'
import produce from 'immer'
// import set from 'dset';
import set from 'lodash/set'
import React, {
  useContext,
  useEffect,
  useMemo,
  useReducer,
  useRef,
} from 'react'

let SET = 'data/SET'
let SET_FN = 'data/SET_FN'
let RESET = 'data/RESET'
let FORCE_REQUIRED = 'data/FORCE_REQUIRED'
let reducer = produce((draft, action) => {
  switch (action.type) {
    case SET: {
      set(draft, action.path, action.value)
      break
    }

    case SET_FN: {
      action.fn(draft, set, get)
      break
    }

    case RESET: {
      return action.value
    }

    case FORCE_REQUIRED: {
      draft._forceRequired = true
      break
    }

    default: {
      throw new Error(
        \`Unknown action type "\${action.type}" in useData reducer.\`
      )
    }
  }
})

let DataContexts = {
  default: React.createContext([]),
}
export function DataProvider(props) {
  if (!props.context) {
    throw new Error(
      \`You're missing the context value in DataProvider. Eg: <DataProvider context="namespace" ...\`
    )
  }
  if (!(props.context in DataContexts)) {
    DataContexts[props.context] = React.createContext([])
  }
  let Context = DataContexts[props.context]

  let [state, dispatch] = useReducer(reducer, props.value)
  let isSubmitting = useRef(false)
  let shouldCallOnChange = useRef(false)

  useEffect(() => {
    if (isSubmitting.current) return

    shouldCallOnChange.current = false
    dispatch({ type: RESET, value: props.value })
  }, [props.value]) // eslint-disable-line
  // ignore dispatch

  let value = useMemo(() => {
    async function onSubmit(args) {
      if (isSubmitting.current) return
      isSubmitting.current = true

      try {
        let res = await props.onSubmit(state, args)
        isSubmitting.current = false

        if (!res) return
      } catch (error) {
        isSubmitting.current = false
      }

      dispatch({ type: FORCE_REQUIRED })
    }

    return [state, dispatch, onSubmit]
  }, [state, props.onSubmit]) // eslint-disable-line
  // the linter says we need props when props.onSubmit is already there

  // keep track of props.onChange outside of the following effect to
  // prevent loops. Making the function useCallback didn't work
  let onChange = useRef(props.onChange)
  useEffect(() => {
    onChange.current = props.onChange
  }, [props.onChange])

  useEffect(() => {
    if (!shouldCallOnChange.current) {
      shouldCallOnChange.current = true
      return
    }

    onChange.current(state, fn => dispatch({ type: SET_FN, fn }))
  }, [state])

  return <Context.Provider value={value}>{props.children}</Context.Provider>
}
DataProvider.defaultProps = {
  context: 'default',
  onChange: () => {},
  onSubmit: () => {},
}

export function useData({
  path = null,
  context = 'default',
  formatIn = null,
  formatOut = null,
  validate = null,
  validateRequired = false,
} = {}) {
  if (process.env.NODE_ENV === 'development') {
    if (!(context in DataContexts)) {
      throw new Error(
        \`"\${context}" isn't a valid Data context. Check that you have <DataProvider context="\${context}" value={data}> in the component that defines the context for this story.\`
      )
    }

    if (formatIn && !(formatIn in fromFormat)) {
      throw new Error(
        \`"\${formatIn}" function doesn't exist or is not exported in Data/format.js\`
      )
    }

    if (formatOut && !(formatOut in fromFormat)) {
      throw new Error(
        \`"\${formatOut}" function doesn't exist or is not exported in Data/format.js\`
      )
    }

    if (validate && !(validate in fromValidate)) {
      throw new Error(
        \`"\${validate}" function doesn't exist or is not exported in Data/validators.js\`
      )
    }
  }

  let contextValue = useContext(DataContexts[context])
  let touched = useRef(false)

  return useMemo(() => {
    let [data, dispatch, onSubmit] = contextValue

    if (!data) {
      if (process.env.NODE_ENV === 'development') {
        console.error(
          'Check that you have <DataProvider value={data}> in the component that defines the data for this story.',
          {
            path,
            formatIn,
            formatOut,
            validate,
            validateRequired,
            data,
          }
        )
      }
      return {}
    }

    let rawValue = path ? get(data, path) : data
    let value = rawValue
    if (path && formatIn) {
      value = fromFormat[formatIn](rawValue, data)
    }

    let isValidInitial = true
    if (validate) {
      isValidInitial = fromValidate[validate](rawValue, value, data)
    }
    let isValid = touched.current || (validateRequired && data._forceRequired)? isValidInitial : true

    function onChange(value, changePath = path) {
      touched.current = !!value

      if (typeof value === 'function') {
        dispatch({ type: SET_FN, fn: value })
      } else if (!changePath) {
        dispatch({ type: RESET, value })
      } else {
        dispatch({
          type: SET,
          path: changePath,
          value: formatOut ? fromFormat[formatOut](value, data) : value,
        })
      }
    }

    return {
      onChange,
      onSubmit,
      value,
      isValid,
      isValidInitial,
      isInvalid: !isValid,
      isInvalidInitial: !isValidInitial,
    }
  }, [contextValue, path, formatIn, formatOut, validateRequired, validate])
}
`;
function ensureData({
  src
}) {
  return ensureFile({
    file: path.join(src, 'Data', 'ViewsData.js'),
    content: DATA
  });
}

function getViewRelativeToView({
  id,
  view,
  viewsById,
  viewsToFiles
}) {
  let importCandidates = viewsById.get(id);

  if (!importCandidates) {
    // TODO add better error message
    console.log('No import candidates for ', id, 'from', view.file);
    importCandidates = new Set();
  }

  let importViewFile = [...importCandidates][0];

  if (importCandidates.size > 1) {
    let pathToView = path.dirname(view.file);
    let maybeFileViewInside = path.join(pathToView, id, 'view.blocks').replace(/\\/g, '/');
    let maybeFileViewCustomInside = path.join(pathToView, id, 'react.js').replace(/\\/g, '/');

    if (importCandidates.has(maybeFileViewInside)) {
      importViewFile = maybeFileViewInside;
    } else if (importCandidates.has(maybeFileViewCustomInside)) {
      importViewFile = maybeFileViewCustomInside;
    }
  }

  return viewsToFiles.get(importViewFile);
}

function ensureFirstStoryIsOn(flow, key, stories) {
  if (!stories.has(key)) return;
  let story = flow.get(key);

  if (story && story.stories.size > 0) {
    let index = 0;

    for (let id of story.stories) {
      if (index === 0 || !story.isSeparate) {
        stories.add(id);
      }

      index++;
      ensureFirstStoryIsOn(flow, id, stories);
    }
  }
}

function makeFlow({
  tools,
  viewsById,
  viewsToFiles
}) {
  let flowMap = new Map();
  let flowMapStr = [];

  for (let view of viewsToFiles.values()) {
    if (!view || view.custom || !view.parsed.view.isStory) continue;
    let states = [];

    for (let id of view.parsed.view.views) {
      let viewInView = getViewRelativeToView({
        id,
        view,
        viewsById,
        viewsToFiles
      });

      if (viewInView && !viewInView.custom && viewInView.parsed.view.isStory) {
        states.push(viewInView.parsed.view.viewPath); // `${pathToViewId}/${id}`)
      }
    }

    let isSeparate = view.parsed.view.flow === 'separate';
    let parent = view.parsed.view.viewPathParent;
    flowMapStr.push(`['${view.parsed.view.viewPath}', { isSeparate: ${isSeparate}, parent: '${parent === '/' ? '' : parent}',
  stories: new Set(${states.length > 0 ? JSON.stringify(states) : ''}) }]`);
    flowMap.set(view.parsed.view.viewPath, {
      parent,
      isSeparate,
      stories: new Set(states)
    });
  }

  let topStory = '/App';
  let initialState = new Set([topStory]);
  ensureFirstStoryIsOn(flowMap, topStory, initialState);
  return `// 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-flow.js

import React, { useCallback, useContext, useEffect, useReducer } from 'react'
${tools ? "import ViewsTools from './ViewsTools.js'" : ''}

export let flow = new Map([
${flowMapStr.join(',\n')}
])

let TOP_STORY = "${topStory}"

function ensureFirstStoryIsOn(key, stories) {
  if (!stories.has(key)) return

  let story = flow.get(key)
  if (story.stories.size > 0) {
    let index = 0
    let canAdd = intersection(stories, story.stories).size === 0
    for (let id of story.stories) {
      if ((canAdd && index === 0) || !story.isSeparate) {
        stories.add(id)
      }
      index++
      ensureFirstStoryIsOn(id, stories)
    }
  }
}

function ensureParents(key, stories) {
  let story = flow.get(key)
  if (!story) {
    console.error(\`View "\${key}" is missing its parent\`)
    return
  }
  if (!story.parent) {
    return
  }

  stories.add(story.parent)
  ensureParents(story.parent, stories)
}

function getAllChildrenOf(key, children) {
  if (!flow.has(key)) return

  let story = flow.get(key)
  for (let id of story.stories) {
    children.add(id)
    getAllChildrenOf(id, children)
  }
}


let intersection = (a, b) => new Set([...a].filter(ai => b.has(ai)))
let difference = (a, b) => new Set([...a].filter(ai => !b.has(ai)))

function getNextFlow(key, state) {
  if (state.has(key)) return state

  let next = new Set([key])

  ensureFirstStoryIsOn(key, next)
  ensureParents(key, next)

  let diffIn = difference(next, state)
  let diffOut = new Set()

  difference(state, next).forEach(id => {
    let story = flow.get(id)
    if (!story) {
      console.debug({ type: 'views/flow/missing-story', id })
      diffOut.add(id)
      return
    }

    if (state.has(story.parent)) {
      let parent = flow.get(story.parent)
      if (intersection(parent.stories, diffIn).size > 0) {
        diffOut.add(id)
        let children = new Set()
        getAllChildrenOf(id, children)
        children.forEach(cid => diffOut.add(cid))
      }
    }
  })

  let nextState = new Set([...difference(state, diffOut), ...diffIn])
  ensureFirstStoryIsOn(TOP_STORY, nextState)
  return new Set([...nextState].sort())
}

let MAX_ACTIONS = 10000
let SYNC = 'flow/SYNC'
let SET = 'flow/SET'

let Context = React.createContext([{ actions: [], flow: new Set() }, () => {}])
export let useFlowState = () => useContext(Context)[0]
export let useFlow = () => useFlowState().flow
export let useSetFlowTo = () => {
  let [, dispatch] = useContext(Context)
  return useCallback(id => dispatch({ type: SET, id }), []) // eslint-disable-line
  // ignore dispatch
}

function getNextActions(state, id) {
  return [id, ...state.actions].slice(0, MAX_ACTIONS)
}

function reducer(state, action) {
  switch (action.type) {
    ${tools ? `case SYNC: {
      return {
        flow: new Set(action.flow),
        actions: getNextActions(state, action.id)
      }
    }` : ''}

    case SET: {
      if (process.env.NODE_ENV === 'development') {
        console.debug({ type: 'views/flow/set', id: action.id })

        if (!flow.has(action.id)) {
          console.debug({ type: 'views/flow/invalid-story', id: action.id, availableStories: flow })
          throw new Error(
            \`Story "$\{action.id}" doesn't exist. See the valid stories logged above this error.\`
          )
        }
      }

      if (state.actions[0] === action.id) {
        if (process.env.NODE_ENV === 'development') {
          console.debug({ type: 'views/flow/already-set-as-last-action-ignoring', id: action.id, actions: state.actions })
        }
        return state
      }

      return {
        flow: getNextFlow(action.id, state.flow),
        actions: getNextActions(state, action.id)
      }
    }

    default: {
      throw new Error(\`Unknown action "\${action.type}" in Flow\`)
    }
  }
}

export function ViewsFlow(props) {
  let context = useReducer(reducer, { actions: [], flow: props.initialState })
  let [state] = context

  useEffect(() => {
    if (typeof props.onChange === 'function') {
      props.onChange(state)
    }
  }, [state]) // eslint-disable-line
  // ignore props.onChange

  return (
    <Context.Provider value={context}>
      ${tools ? '<ViewsTools flow={context}>{props.children}</ViewsTools>' : '{props.children}'}
    </Context.Provider>
  )
}

ViewsFlow.defaultProps = {
  initialState: new Set(${JSON.stringify([...initialState], null, '  ')})
}

export function normalizePath(viewPath, relativePath) {
  let url = new URL(\`file://\${viewPath}/../\${relativePath}\`)
  return url.pathname
}`;
}

function ensureFlow({
  src,
  tools,
  viewsById,
  viewsToFiles
}) {
  return ensureFile({
    file: path.join(src, 'Logic', 'ViewsFlow.js'),
    content: makeFlow({
      tools,
      viewsById,
      viewsToFiles
    })
  });
}

let USE_IS_BEFORE = `// 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-before.js
import { useEffect, useState } from 'react'

export default function useIsBefore() {
  let [isBefore, setIsBefore] = useState(true)

  useEffect(function() {
    let cancel = false
    requestAnimationFrame(function() {
      if (cancel) return
      setIsBefore(false)
    })
    return () => cancel = true
  }, [])

  return isBefore
}`;
function ensureIsBefore({
  src
}) {
  return ensureFile({
    file: path.join(src, 'Logic', 'useIsBefore.js'),
    content: USE_IS_BEFORE
  });
}

let USE_IS_HOVERED = `// 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-hovered.js
import { useEffect, useMemo, useState } from 'react'

// TODO replace with something more performant like:
// https://github.com/therealparmesh/use-hovering/blob/master/src/index.js
// or useTooltip from Reach UI
// https://github.com/reach/reach-ui/blob/master/packages/tooltip/src/index.tsx
export default function useIsHovered({ isDisabled, isSelected, onMouseEnter, onMouseLeave }) {
  let [isHovered, setIsHovered] = useState(false)

  let isHoveredBind = useMemo(() => {
    return {
      onMouseEnter: event => {
        setIsHovered(true)

        if (typeof onMouseEnter === 'function') {
          onMouseEnter(event)
        }
      },
      onMouseLeave: event => {
        setIsHovered(false)

        if (typeof onMouseLeave === 'function') {
          onMouseLeave(event)
        }
      },
    }
  }, [onMouseEnter, onMouseLeave])

  useEffect(() => {
    if (!isDisabled) return

    setIsHovered(false)
  }, [isDisabled])

  return [isHovered, isHovered && isSelected, isHoveredBind]
}`;
function ensureIsHovered({
  src
}) {
  return ensureFile({
    file: path.join(src, 'Logic', 'useIsHovered.js'),
    content: USE_IS_HOVERED
  });
}

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 = () => ({
  ${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 {
    media = JSON.parse((await fs.promises.readFile(path.resolve(path.join(src, '..', 'app.viewstools')), 'utf8'))).media;
    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
  }));
}

async function ensureIsMedia({
  src
}) {
  return ensureFile({
    file: path.join(src, 'Logic', 'useIsMedia.js'),
    content: makeUseIsMedia((await getMediaConfig(src)))
  });
}

let TOOLS_FILE = `import { useEffect } from 'react'

export default function ViewsTools(props) {
  useEffect(() => {
    console.log(\`



    😱😱😱😱😱😱😱😱😱😱😱



    🚨 You're missing out!!!

    🚀 Views Tools can help you find product market fit before you run out of money.

    ✨ Find out how 👉 https://views.tools




    \`)
  }, [])

  return props.children
}`;
async function ensureTools({
  src
}) {
  let file = path.join(src, 'Logic', 'ViewsTools.js');
  if ((await fsExtra.exists(file)) && process.env.REACT_APP_VIEWS_TOOLS) return null;
  return ensureFile({
    file,
    content: TOOLS_FILE
  });
}

let FILE_USE_IS_BEFORE = path.join('Logic', 'useIsBefore.js');
let FILE_USE_IS_HOVERED = path.join('Logic', 'useIsHovered.js');
let FILE_USE_IS_MEDIA = path.join('Logic', 'useIsMedia.js');
let FILE_USE_DATA = path.join('Data', 'ViewsData.js');
let FILE_USE_FLOW = path.join('Logic', 'ViewsFlow.js');
function makeGetSystemImport(src) {
  return function getSystemImport(id, file) {
    switch (id) {
      case 'Column':
        // Column is imported from react-virtualized
        break;

      case 'ViewsUseIsMedia':
        return `import useIsMedia from '${relativise(file, path.join(src, FILE_USE_IS_MEDIA))}'`;

      case 'ViewsUseIsBefore':
        return `import useIsBefore from '${relativise(file, path.join(src, FILE_USE_IS_BEFORE))}'`;

      case 'ViewsUseIsHovered':
        return `import useIsHovered from '${relativise(file, path.join(src, FILE_USE_IS_HOVERED))}'`;

      case 'ViewsUseData':
        return `import * as fromData from '${relativise(file, path.join(src, FILE_USE_DATA))}'`;

      case 'ViewsUseFlow':
        return `import * as fromFlow from '${relativise(file, path.join(src, FILE_USE_FLOW))}'`;

      default:
        return false;
    }
  };
}

let enter = (node, parent, state) => {
  if (node.isFragment) return;
  let value;

  if (parent) {
    value = `"${state.name}.${node.testId}"`;
  } else {
    value = `{\`\${props['${state.testIdKey}'] || '${node.testId}'}\`}`;
  }

  state.render.push(` ${state.testIdKey}=${value}`);
};

let enter$1 = (node, parent, state) => {
  if (node.isFragment || !process.env.REACT_APP_VIEWS_TOOLS) return;

  if (state.viewPath) {
    state.render.push(` ${state.viewPathKey}="${state.viewPath}"`);
  } else {
    state.render.push(` ${state.viewPathKey}={props["${state.viewPathKey}"]}`);
  }
};

let IS_INT = /^([0-9]+)(.*)$/;
let IS_FLOAT = /^([0-9]+\.[0-9]+)(.*)$/;
let MULTIPLE_BY_FONT_SIZE = 'x font size';
let PIXEL = 'px';
let PERCENTAGE = '%';
let EM = 'em';
let REM = 'rem';
let VW = 'vw';
let VH = 'vh';
let DEGREES = 'deg';
let GRADIANS = 'grad';
let RADIANS = 'rad';
let TURN = 'turn';

let getUnit = node => {
  let units = getUnits(node.name);
  if (typeof node.value === 'number') return units[0] || '';
  let match = node.value.match(IS_INT.test(node.value) ? IS_INT : IS_FLOAT);
  return match && units.find(u => u === match[2]) || units[0] || '';
};
let LENGTH = [PIXEL, PERCENTAGE, EM, REM, VW, VH];
let PERCENTAGE_FIRST_LENGTH = [PERCENTAGE, PIXEL, EM, REM, VW, VH];
let MULTIPLE_BY_FONT_SIZE_LENGTH = [MULTIPLE_BY_FONT_SIZE, PIXEL, PERCENTAGE, EM, REM, VW, VH];
let ANGLE = [DEGREES, GRADIANS, RADIANS, TURN];
let UNITLESS = [];
let UNITS = {
  blurRadius: LENGTH,
  borderBottomLeftRadius: LENGTH,
  borderBottomRightRadius: LENGTH,
  borderBottomWidth: LENGTH,
  borderLeftWidth: LENGTH,
  borderRadius: LENGTH,
  borderRightWidth: LENGTH,
  borderTopLeftRadius: LENGTH,
  borderTopRightRadius: LENGTH,
  borderTopWidth: LENGTH,
  borderWidth: LENGTH,
  bottom: LENGTH,
  flexBasis: PERCENTAGE_FIRST_LENGTH,
  flexGrow: UNITLESS,
  flexShrink: UNITLESS,
  fontSize: LENGTH,
  height: LENGTH,
  left: LENGTH,
  letterSpacing: UNITLESS,
  lineHeight: MULTIPLE_BY_FONT_SIZE_LENGTH,
  margin: LENGTH,
  marginBottom: LENGTH,
  marginLeft: LENGTH,
  marginRight: LENGTH,
  marginTop: LENGTH,
  maxHeight: LENGTH,
  maxWidth: LENGTH,
  minHeight: LENGTH,
  minWidth: LENGTH,
  offsetX: LENGTH,
  offsetY: LENGTH,
  opacity: UNITLESS,
  outline: LENGTH,
  padding: LENGTH,
  paddingBottom: LENGTH,
  paddingLeft: LENGTH,
  paddingRight: LENGTH,
  paddingTop: LENGTH,
  perspective: LENGTH,
  right: LENGTH,
  rotate: ANGLE,
  rotateX: ANGLE,
  rotateY: ANGLE,
  scale: UNITLESS,
  scaleX: UNITLESS,
  scaleY: UNITLESS,
  shadowOffsetY: LENGTH,
  shadowOffsetX: LENGTH,
  shadowBlur: LENGTH,
  shadowSpread: LENGTH,
  skew: ANGLE,
  spreadRadius: LENGTH,
  top: LENGTH,
  translateX: LENGTH,
  translateY: LENGTH,
  width: LENGTH,
  wordSpacing: LENGTH,
  zIndex: UNITLESS
};
let UNITS_KEYS = Object.keys(UNITS);

let getUnits = key => {
  let found = UNITS_KEYS.find(ukey => key.startsWith(ukey));
  return UNITS[found] || UNITLESS;
};

var wrap = (s => `{${s}}`);

var safe = ((value, node) => typeof value === 'string' && !isSlot(value, node) ? JSON.stringify(value) : wrap(value));

let checkParentStem = (node, styleKey) => {
  if (styleKey !== 'isHovered' || styleKey !== 'isDisabled' || styleKey !== 'isSelected' || styleKey !== 'isSelectedHovered' || !node.parent) return false;
  let matchingParentStem = node.parent.scopes.some(scope => scope.value === styleKey);
  return matchingParentStem && (node.parent.is || node.parent.name);
};
let INTERPOLATION = /\${(.+)}/;
let isInterpolation = str => INTERPOLATION.test(str);
let deinterpolate = str => {
  let match = str.match(INTERPOLATION);
  return match ? match[1] : str;
};
let getObjectAsString = obj => Array.isArray(obj) ? `[${obj.map(getObjectAsString)}]` : wrap(Object.keys(obj).map(k => {
  let v = typeof obj[k] === 'object' && hasKeys(obj[k]) ? getObjectAsString(obj[k]) : obj[k];
  return `${JSON.stringify(k)}: ${v}`;
}).join(','));
let getProp = (node, key, scope = 'base') => {
  let finder = typeof key === 'string' ? p => p.name === key : p => key.test(p.name);

  if (scope !== 'base') {
    let nodeScope = node.scopes.find(item => item.value === scope);
    let prop = nodeScope && nodeScope.properties.find(finder);

    if (prop) {
      return prop;
    }
  }

  return node.properties && node.properties.find(finder);
};
let getPropValueOrDefault = (node, key, defaultValue) => {
  return hasProp(node, key) ? getProp(node, key).value : defaultValue;
};

let getScopedProps = (propNode, blockNode) => {
  let scopes = blockNode.scopes.filter(scope => !scope.isSystem).map(scope => {
    let prop = scope.properties.find(prop => prop.name === propNode.name);
    return prop && {
      prop,
      when: scope.value,
      scope
    };
  }).filter(Boolean).reverse();
  if (isEmpty(scopes)) return false;
  return scopes;
};

let getScopedConditionPropValue = node => {
  let value = null;

  if (node.tags.slot) {
    value = node.value;
  } else if (typeof node.value === 'string') {
    value = safe(node.value);
  } else if (typeof node.value === 'boolean' && node.name === 'shadowInset') {
    value = node.value ? "'inset'" : "''";
  } else {
    let unit = getUnit(node);
    value = unit ? `"${node.value}${unit}"` : node.value;
  }

  return value;
};

let CHILD_VALUES = /!?props\.(isSelected|isHovered|isFocused|isSelectedHovered)/;
let DATA_VALUES = /!?props\.(isInvalid|isInvalidInitial|isValid|isValidInitial|value)/;
let IS_HOVERED_OR_SELECTED_HOVER = /!?props\.(isHovered|isSelectedHovered)/;
let IS_FLOW = /!?props.flow$/;
let getScopedCondition = (propNode, blockNode, state) => {
  let scopedProps = getScopedProps(propNode, blockNode);
  if (!scopedProps) return false;
  let conditional = getScopedConditionPropValue(propNode);
  scopedProps.forEach(scope => {
    let when = scope.when;

    if (state.data && DATA_VALUES.test(when)) {
      when = when.replace('props', 'data');
    } else if (hasCustomBlockParent(blockNode) && CHILD_VALUES.test(when)) {
      when = when.replace('props.', 'childProps.');
    } else if (IS_FLOW.test(when)) {
      let flowPath = getFlowPath(scope.scope, blockNode, state);
      when = when.replace('props.flow', `flow.has('${flowPath}')`);
    } else if ((blockNode.action || !!getActionableParent(blockNode)) && IS_HOVERED_OR_SELECTED_HOVER.test(when)) {
      when = when.replace('props.', '');
    }

    conditional = `${when} ? ${getScopedConditionPropValue(scope.prop)} : ${conditional}`;
  });
  let lastScope = scopedProps[scopedProps.length - 1];

  if (!lastScope.prop.animation || lastScope.prop.animation.curve !== 'spring') {
    lastScope.prop.conditional = conditional;
  }

  return conditional;
};
let getScopedImageCondition = (scopes, scopedNames, defaultName) => {
  let conditional = defaultName;
  scopes.forEach((scope, index) => {
    conditional = `${scope.when} ? ${scopedNames[index]} : ` + conditional;
  });
  return conditional;
};
let styleStems = ['isHovered', 'isFocused', 'isPlaceholder', 'isDisabled', 'isSelected', 'isSelectedHovered'];
let getStyleType = node => styleStems.find(tag => isTag(node, tag)) || 'base';
let hasKeys = obj => Object.keys(obj).length > 0;
let hasKeysInChildren = obj => Object.keys(obj).some(k => hasKeys(obj[k]));
let hasProp = (node, key, match) => {
  let prop = getProp(node, key);
  if (!prop) return false;
  return typeof match === 'function' ? match(prop.value) : true;
};
let isSlot = (maybeNode1, maybeNode2) => {
  let node = maybeNode2 || maybeNode1;
  return typeof node === 'string' ? /(data|isHovered|childProps|props|isBefore|isMedia\.)/.test(node) : isTag(node, 'slot');
};
let isStyle = node => isTag(node, 'style');
let isTag = (node, tag) => node && node.tags[tag];
let getActionableParent = node => {
  if (!node.parent) return false;
  if (node.parent.action) return node.parent;
  return getActionableParent(node.parent);
};
let hasCustomBlockParent = node => {
  if (!node.parent) return !node.isBasic;
  if (!node.parent.isBasic) return true;
  return hasCustomBlockParent(node.parent);
};
let getAllowedStyleKeys = node => {
  if (node.isCapture) {
    return ['base', 'isFocused', 'isHovered', 'isDisabled', 'isPlaceholder'];
  } else if (node.action || isTable(node) || getActionableParent(node)) {
    return ['base', 'isFocused', 'isHovered', 'isDisabled', 'isSelected', 'isSelectedHovered'];
  }

  return ['base', 'isFocused'];
};
let isList = node => node && node.type === 'Block' && node.name === 'List';
let isCell = node => node.properties.some(prop => prop.name === 'isCell');
let isHeader = node => node.properties.some(prop => prop.name === 'isHeader');
let isColumn = node => node && node.type === 'Block' && node.name === 'Column';
let isTable = node => node && node.type === 'Block' && node.name === 'Table';
let isEmpty = list => list.length === 0;
let isValidImgSrc = (node, parent) => node.name === 'source' && parent.name === 'Image' && parent.isBasic;
let pushImageToState = (state, scopedNames, paths) => scopedNames.forEach(name => {
  let path = paths[scopedNames.findIndex(item => item === name)];

  if (!state.images.includes(path)) {
    state.images.push({
      name,
      file: path
    });
  }
});
let getScopes = (node, parent) => {
  let scopedProps = getScopedProps(node, parent);
  if (!scopedProps) return false;
  let paths = scopedProps.map(scope => scope.prop.value);
  let scopedNames = paths.map(path => toCamelCase(path));
  return {
    scopedProps,
    paths,
    scopedNames
  };
};
let isSvg = node => /^Svg/.test(node.name) && node.isBasic;
let hasCustomScopes = (propNode, blockNode) => blockNode.scopes.some(scope => !scope.isSystem && scope.properties.some(prop => prop.name === propNode.name)); // let isRotate = name =>
//   name === 'rotate' || name === 'rotateX' || name === 'rotateY'

let getStandardAnimatedString = (node, prop, isNative) => {
  let value = `animated${node.id}${prop.animationIndexOnBlock > 0 ? prop.animationIndexOnBlock : ''}.${prop.name}`; // let unit = getUnit(prop)
  // if (unit) {
  //   value = `\`\${${value}}${unit}\``
  // }

  return `${isNative ? prop.name : `"--${prop.name}"`}: ${value}`;
};

let getTransformString = (node, transform, isNative) => {
  let transformStr = `transform: [`;
  transform.props.forEach((prop, i) => {
    transformStr += `{${getAnimatedString(node, prop, isNative)}},`;
  });
  return `${transformStr}]`;
};
let getAnimatedStyles = (node, isNative) => {
  let props = isNative ? getAllAnimatedProps(node, true) : getSpringProps(node);
  return props.map(prop => getAnimatedString(node, prop, isNative)).join(', ');
};

let getPropValue = (prop, interpolateValue = true) => {
  let unit = getUnit(prop);

  if (unit) {
    let value = interpolateValue ? `\`\${${prop.value}}${unit}\`` : `"${prop.value}${unit}"`;
    return `typeof ${prop.value} === 'number' ? ${value} : ${prop.value}`;
  } else {
    return prop.value;
  }
};

let getDynamicStyles = node => {
  return flatten([node.properties.filter(prop => prop.tags.style && prop.tags.slot && !getScopedProps(prop, node)).map(prop => `'--${prop.name}': ${getPropValue(prop)}`), node.scopes.map(scope => scope.properties.filter(prop => prop.tags.style).map(prop => {
    let value = null;

    if (prop.conditional) {
      value = prop.conditional; // } else if (prop.tags.slot && prop.scope === 'isHovered') {
      //   value = getPropValue(prop)
    }

    return value && `'--${prop.name}': ${value}`;
  }))]).filter(Boolean);
};

let getAnimatedString = (node, prop, isNative) => prop.name === 'transform' ? getTransformString(node, prop, isNative) : getStandardAnimatedString(node, prop, isNative);

let getNonAnimatedDynamicStyles = node => {
  let animatedProps = getAllAnimatedProps(node, true).map(prop => prop.name);
  let animatedTransforms = animatedProps.includes('transform') ? getAllAnimatedProps(node, true).find(prop => prop.name === 'transform').props.map(prop => prop.name) : [];
  return Object.keys(node.style.dynamic.base).filter(key => !animatedProps.includes(key) && !animatedTransforms.includes(key)).reduce((obj, key) => {
    obj[key] = node.style.dynamic.base[key];
    return obj;
  }, {});
};
let getAllAnimatedProps = (node, isNative) => {
  let props = flatten(node.scopes.map(scope => scope.properties.filter(prop => prop.animation)));
  return checkForTransforms(props) && isNative ? combineTransforms(props) : props;
};

let combineTransforms = props => {
  // TODO: handle transforms on different scopes
  let transform = {
    name: 'transform',
    props: []
  };
  props.forEach((prop, i) => {
    if (TRANSFORM_WHITELIST[prop.name]) {
      prop.isTransform = true;
      transform.props.push(prop);
    }
  });
  props.push(transform);
  return props.filter(prop => !prop.isTransform);
};

let checkForTransforms = props => props.some(prop => TRANSFORM_WHITELIST[prop.name]);

let getTimingProps = node => flatten(node.scopes.map(scope => scope.properties.filter(prop => prop.animation && prop.animation.curve !== 'spring')));

let getSpringProps = node => flatten(node.scopes.map(scope => scope.properties.filter(prop => prop.animation && prop.animation.curve === 'spring'))); // https://github.com/facebook/react-native/blob/26684cf3adf4094eb6c405d345a75bf8c7c0bf88/Libraries/Animated/src/NativeAnimatedHelper.js
let TRANSFORM_WHITELIST = {
  translateX: true,
  translateY: true,
  scale: true,
  scaleX: true,
  scaleY: true,
  rotate: true,
  rotateX: true,
  rotateY: true,
  perspective: true
};
let createId = (node, state, addClassName = true) => {
  let id = node.is || node.name; // count repeatead ones

  if (state.usedBlockNames[id]) {
    id = `${id}${state.usedBlockNames[id]++}`;
  } else {
    state.usedBlockNames[id] = 1;
  }

  node.styleName = id;

  if (addClassName && node.className) {
    node.className.push(`\${styles.${id}}`);
  }

  return id;
};
let CONTENT_CONTAINER_STYLE_PROPS = ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight', 'flexDirection', 'justifyContent', 'alignItems'];

let isContentContainerStyleProp = prop => CONTENT_CONTAINER_STYLE_PROPS.includes(prop);

let hasContentContainerStyleProp = styleProps => Object.keys(styleProps).some(isContentContainerStyleProp);
let getContentContainerStyleProps = styleProps => Object.keys(styleProps).filter(isContentContainerStyleProp).reduce((obj, key) => {
  obj[key] = styleProps[key];
  return obj;
}, {});
let removeContentContainerStyleProps = styleProps => Object.keys(styleProps).filter(key => !isContentContainerStyleProp(key)).reduce((obj, key) => {
  obj[key] = styleProps[key];
  return obj;
}, {});
let hasRowStyles = node => node.properties.some(prop => prop.name.match(/^row/) && prop.name !== 'rowHeight');
let MAYBE_HYPHENATED_STYLE_PROPS = ['alignContent', 'alignItems', 'alignSelf', 'backgroundBlendMode', 'backgroundClip', 'backgroudOrigin', 'backgroundRepeat', 'boxSizing', 'clear', 'cursor', 'flexBasis', 'flexDirection', 'flexFlow', 'flexWrap', 'float', 'fontFamily', 'fontStretch', 'justifyContent', 'objectFit', 'overflowWrap', 'textAlign', 'textDecorationLine', 'textTransform', 'whiteSpace', 'wordBreak'];
let maybeMakeHyphenated = ({
  name,
  value
}) => MAYBE_HYPHENATED_STYLE_PROPS.includes(name) && /^[a-zA-Z]+$/.test(value) ? toSlugCase(value) : value;
let isStory = (node, state) => !node.isBasic && state.isStory(node.name) && state.flow === 'separate';
function getFlowPath(node, parent, state) {
  // TODO warn if action is used but it isn't in actions (on parser)
  // TODO warn that there's setFlowTo without an id (on parser)
  let setFlowTo = node.defaultValue;

  if (!setFlowTo.startsWith('/')) {
    setFlowTo = path.normalize(path.join(state.viewPath, setFlowTo));
  }

  return setFlowTo;
}

let typesMap = {
  email: 'email',
  text: 'text',
  number: 'number',
  phone: 'tel',
  secure: 'password',
  file: 'file'
};
let enter$2 = (node, parent, state) => {
  if (!node.isCapture || node.name === 'CaptureTextArea') return;
  let type = getProp(node, 'type');

  if (isSlot(type)) {
    state.render.push(` type=${safe(type.value)}`); // fix for iOS Safari to show the numpad on
    // http://danielfriesen.name/blog/2013/09/19/input-type-number-and-ios-numeric-keypad/

    let maybeNumber = (name, valueWhenTrue) => `${name}={${type.value} === 'number' || ${type.value} === 'phone'? "${valueWhenTrue}" : undefined}`;

    state.render.push(maybeNumber('inputMode', 'numeric'));
    state.render.push(maybeNumber('pattern', '[0-9]*'));
  } else {
    state.render.push(` type=${safe(typesMap[type.value])}`); // fix for iOS Safari to show the numpad on
    // http://danielfriesen.name/blog/2013/09/19/input-type-number-and-ios-numeric-keypad/

    if (type.value === 'number' || type.value === 'phone') {
      state.render.push(` inputMode="numeric" pattern="[0-9]*"`);
    }
  }
};

function enter$3(node, parent, state) {
  let value = state.getValueForProperty(node, parent, state);

  if (value) {
    Object.keys(value).forEach(k => {
      if (k === '...') {
        return state.render.push(` {...${value[k]}}`);
      } else {
        return state.render.push(` ${k}=${value[k]}`);
      }
    });
  }
}

function enter$4(node, parent, state) {
  if (!isColumn(node)) return;
  let dataKey = getProp(node, 'key');
  let width = getWidth(node, parent);
  state.render.push(` dataKey="${dataKey.value}" width={${width}}`); // let label = getLabel(node)
  // if (label) {
  //   state.render.push(`label="${label}"`)
  // }

  let header = node.children.find(isHeader);

  if (header && !header.isBasic) {
    state.render.push(` headerRenderer={headerProps => <${header.name} {...headerProps} `);
    header.properties.forEach(propNode => {
      if (propNode.name === 'isHeader') return;
      enter$3(propNode, header, state);
    });
    state.render.push(` />}`);
  }

  let cell = node.children.find(isCell);

  if (cell && !cell.isBasic) {
    state.render.push(` cellRenderer={cellProps => <${cell.name} {...cellProps} `);
    cell.properties.forEach(propNode => {
      if (propNode.name === 'isCell') return;
      enter$3(propNode, cell, state);
    });
    state.render.push(` />}`);
  }
}

let getWidth = (node, parent) => {
  let width = getProp(node, 'width');

  if (width && width.value !== 'auto') {
    return width.value;
  }

  let columns = parent.children.filter(child => child.name === 'Column');
  let columnsWithFixedWidth = columns.map(node => {
    let width = getProp(node, 'width');
    return width && typeof width.value === 'number' && width.value;
  }).filter(Boolean);
  let columnsWidthSum = columnsWithFixedWidth.reduce((res, value) => res + value, 0);
  return columnsWidthSum ? `(width - ${columnsWidthSum}) / ${columns.length - columnsWithFixedWidth.length}` : `width / ${columns.length}`;
}; // let getLabel = node => {
//   let header = node.children.find(node => getProp(node, 'isHeader'))
//   if (!header) return
//   if (header.name === 'Text') {
//     // removing the text node, because the column handles the label
//     node.children.splice(node.children.indexOf(header), 1)
//   } else {
//     node.externalHeader = header
//   }
//   return getProp(header, 'text').value
// }

function leave(node, parent, state) {
  if (node.explicitChildren) {
    state.render.push('>');
    state.render.push(node.explicitChildren);
  }
}

let enter$5 = (node, parent, state) => {
  if (node.goTo) {
    let goTo = getProp(node, 'goTo');
    state.render.push(` href=${safe(goTo.value)} rel='noopener noreferrer' target='_blank'`);
  }
};

function enter$6(node, parent, state) {
  if (!node.isDefiningChildrenExplicitly && node.isGroup && node.children.length > 0 && !node.nameFinal.includes('FlatList')) {
    state.render.push('>');

    if (!node.isBasic) {
      state.render.push('{childProps => (');

      if (node.children.length > 1) {
        state.render.push('<React.Fragment>');
      }
    }
  }
}
function leave$1(node, parent, state) {
  if (!node.isDefiningChildrenExplicitly && node.isGroup && node.children.length > 0 && !node.nameFinal.includes('FlatList') && !node.isBasic) {
    if (node.children.length > 1) {
      state.render.push('</React.Fragment>');
    }

    state.render.push(')}');
  }
}

function enter$7(node, parent, state) {
  if (isList(parent)) {
    state.render.push(` index={index}`);
    let pass = getProp(parent, 'pass');

    if (pass) {
      state.render.push(` ${pass.value}={${pass.value}}`);
    } else {
      state.render.push(' {...item}');
    }

    if (!parent.nameFinal.includes('FlatList')) {
      let key = getProp(node, 'key');
      key = key ? key.value : 'index';
      state.render.push(` key={${key}}`);
    }
  }
}

function enter$8(node, parent, state) {
  if (isList(node)) {
    let from = getProp(node, 'from');
    if (!from) return;
    let pass = getProp(node, 'pass');
    let itemName = pass ? pass.value : 'item';

    if (node.nameFinal.includes('FlatList')) {
      let key = getProp(node.children[0], 'key');
      key = key ? key.value : 'index';
      state.render.push(`data={${from.value}} keyExtractor={(item, index) => ${key}} renderItem={({ ${itemName}, index }) =>`);
    } else {
      state.render.push(`{Array.isArray(${from.value}) && ${from.value}.map((${itemName}, index) => `);
    }
  }
}
function leave$2(node, parent, state) {
  if (isList(node)) {
    state.render.push(node.nameFinal.includes('FlatList') ? '}' : ')}');
  }
}

let enter$9 = node => node.skip;

function leave$3(node, parent, state) {
  if (node.isDefiningChildrenExplicitly) return;

  if ((!parent && node.isGroup || node.explicitChildren || node.isGroup && node.children.length > 0) && !node.nameFinal.includes('FlatList')) {
    if (!parent && node.isGroup) {
      if (node.children.length === 0) {
        state.render.push('>');
      }

      if (!state.hasAlreadyDefinedChildren) {
        state.hasAlreadyDefinedChildren = true;
        state.render.push(`{props.children}`);
      }
    }

    state.render.push(`</${node.nameFinal}>`);
  } else {
    state.render.push('/>');
  }
}

var handleTable = ((node, parent, state) => {
  if (isTable(node)) {
    let from = getProp(node, 'from'); // skip the table if we don't have a from prop

    if (!from) return true;
    state.isTable = true;
    state.render.push(`<AutoSizer>{({ width, height }) => (`);
  }

  return isCell(node) || isHeader(node);
});

var getBlockName = ((node, parent, state) => {
  let name = node.name;

  switch (node.name) {
    case 'Capture':
      name = 'input';
      break;

    case 'CaptureTextArea':
      name = 'textarea';
      break;

    case 'Horizontal':
    case 'Vertical':
      name = getGroupBlockName(node, parent);
      break;

    case 'Image':
      name = 'img';
      break;

    case 'Text':
      return 'span';

    case 'List':
      name = 'div';
      break;

    case 'Svg':
      name = 'svg';
      break;

    case 'SvgGroup':
      name = 'g';
      break;

    case 'SvgCircle':
    case 'SvgEllipse':
    case 'SvgLinearGradient':
    case 'SvgRadialGradient':
    case 'SvgLine':
    case 'SvgText':
    case 'SvgPath':
    case 'SvgPolygon':
    case 'SvgPolyline':
    case 'SvgRect':
    case 'SvgSymbol':
    case 'SvgUse':
    case 'SvgDefs':
    case 'SvgStop':
      name = toCamelCase(node.name.replace('Svg', ''));
      break;

    case 'Block':
    case 'View':
      name = 'React.Fragment';
      break;
  }

  if (node.hasSpringAnimation) {
    return `animated.${name}`;
  }

  return name;
});

let getGroupBlockName = (node, parent, state) => {
  let name = 'div';

  if (node.isFragment) {
    name = 'React.Fragment';
  } else if (hasProp(node, 'isModal')) {
    name = 'ViewsModalOverlay';
  } else if (parent && hasProp(parent, 'isModal')) {
    name = 'ViewsModalOverlayContent';
  } else if (hasProp(node, 'goTo')) {
    name = 'a';
    node.goTo = true;
    node.action = getProp(node, 'goTo').value;
  } else if (hasProp(node, 'onClick')) {
    let propNode = getProp(node, 'onClick');
    let prevParent = parent;
    let canBeButton = true;

    while (prevParent && canBeButton) {
      if (prevParent.type === 'Block') {
        canBeButton = !hasProp(prevParent, 'onClick');
      }

      prevParent = prevParent.parent;
    }

    if (canBeButton) {
      if (!hasProp(node, 'onClickUseDiv')) {
        name = 'button';
      }

      node.action = propNode.value;
    }
  } else if (hasProp(node, 'overflowY', v => v === 'auto' || v === 'scroll')) {
    name = 'div';
  } else if (hasProp(node, 'onSubmit')) {
    name = 'form';
  }

  return name;
};

function enter$a(node, parent, state) {
  // if (parent && !parent.isBasic && !node.isBasic) return true
  if (node.isFragment && node.children.length === 0) return true;

  if (node.isChildren) {
    state.hasAlreadyDefinedChildren = true;
    state.render.push(`{typeof props.children === 'function'? props.children({ isSelected: props.isSelected`);
    let useIsHovered = !!getActionableParent(node);

    if (useIsHovered) {
      state.useIsHovered = true;
      state.render.push(', isHovered, isSelectedHovered');
    }

    state.render.push(`}) : null}`);
    return true;
  }

  if (node.isFragment && node.name === 'View') {
    state.flow = getPropValueOrDefault(node, 'is', false);
    state.flowDefaultState = null;
  }

  if (isStory(node, state)) {
    state.use('ViewsUseFlow');
  }

  let name = getBlockName(node, parent);
  if (name === null) return true;
  state.use(name, node.isLazy); // TODO remove the use of those because they're just the name and keep one

  node.nameFinal = name;
  node.nameTag = name;
  if (handleTable(node, parent, state)) return true;

  if (!node.isDefiningChildrenExplicitly) {
    state.render.push(`<${node.nameFinal}`);
  }
}

let IS_MEDIA = /(!?props\.isMedia)(.+)/;
let DATA_VALUES$1 = /!?props\.(isInvalid|isInvalidInitial|isValid|isValidInitial|value)/;
let CHILD_VALUES$1 = /!?props\.(isSelected|isHovered|isFocused)/;
let IS_HOVERED = /!?props\.(isHovered|isSelectedHovered)/;
let IS_FLOW$1 = /!?props\.flow$/;
function enter$b(node, parent, state) {
  if (node.isFragment && node.children.length === 0) return; // onWhen lets you show/hide blocks depending on props

  let onWhen = getProp(node, 'onWhen');

  if (onWhen) {
    node.onWhen = true;
    if (parent && !isList(parent)) state.render.push('{');
    let value = onWhen.value;

    if (state.data && DATA_VALUES$1.test(value)) {
      value = value.replace('props', 'data');
    } else if (IS_MEDIA.test(value)) {
      let [, variable, media] = value.match(IS_MEDIA);
      value = `${variable.replace('props.', '')}.${media.toLowerCase()}`;
    } else if (hasCustomBlockParent(node) && CHILD_VALUES$1.test(value)) {
      value = value.replace('props.', 'childProps.');
    } else if (IS_FLOW$1.test(value)) {
      let flowPath = getFlowPath(onWhen, node, state);
      value = value.replace('props.flow', `flow.has('${flowPath}')`);
    } else if (IS_HOVERED.test(value)) {
      value = value.replace('props.', '');
    }

    state.render.push(`${value} ? `);
  } else if (isStory(node, state)) {
    node.onWhen = true;
    state.render.push(`{flow.has("${state.viewPath}/${node.name}") ? `);
  }
}
function leave$4(node, parent, state) {
  if (node.onWhen) {
    state.render.push(` : null`);
    if (parent && !isList(parent)) state.render.push('}');
  }
}

let enter$c = (node, parent, state) => {
  node.className = node.isBasic ? [node.name === 'Text' ? 'views-text' : node.isCapture ? 'views-capture' : 'views-block'] : [];
  let className = getProp(node, 'className');

  if (className) {
    node.className.push(className.tags.slot ? `\${${className.value}}` : className.value);
  }
};
let leave$5 = (node, parent, state) => {
  if (node.isFragment) return;

  if (node.className.length === 1) {
    let className = node.className[0];
    let shouldWrap = true;

    if (isInterpolation(className)) {
      className = deinterpolate(className);
    } else if (!isSlot(className)) {
      className = `"${className}"`;
      shouldWrap = false;
    }

    state.render.push(` className=${shouldWrap ? wrap(className) : className}`);
  } else if (node.className.length > 1) {
    let className = `\`${node.className.join(' ')}\``;
    state.render.push(` className=${wrap(className)}`);
  }
};

let enter$d = (node, parent, state) => {
  // TODO caption
  if (node.name === 'Image') {
    state.render.push(' alt={""}');
  }
};

function enter$e(node, parent, state) {
  node.style = {
    dynamic: {
      base: {},
      isHovered: {},
      isFocused: {},
      isDisabled: {},
      isPlaceholder: {},
      isSelected: {},
      isSelectedHovered: {}
    },
    static: {
      base: {},
      isHovered: {},
      isFocused: {},
      isDisabled: {},
      isPlaceholder: {},
      isSelected: {},
      isSelectedHovered: {}
    }
  };
  if (node.isFragment) return; // TODO use this directly in styles without having to go through this

  node.scopes.filter(scope => scope.isSystem).forEach(scope => {
    scope.properties.forEach(propNode => {
      if (propNode.name === 'when') return;
      let {
        _isProp,
        ...styleForProperty
      } = state.getStyleForProperty(propNode, node, state, isSlot(propNode));

      if (_isProp) {
        Object.keys(styleForProperty).forEach(k => state.render.push(` ${k}=${safe(styleForProperty[k], node)}`));
      } else {
        let hasMatchingParent = parent && node.isDynamic ? checkParentStem(node, scope.value) : false;
        let target = isSlot(propNode) || hasMatchingParent ? node.style.dynamic : node.style.static;
        Object.assign(target[scope.value], styleForProperty);
      }
    });
  }); // ensure flex-direction in Horizontals

  if (node.isGroup && node.name === 'Horizontal') {
    node.style.static.base.flexDirection = 'row';
  }
}

function leave$6(node, parent, state) {
  if (node.isFragment) return;
  let allowedStyleKeys = getAllowedStyleKeys(node);
  let scopedUnderParent = !node.isCapture && !node.action && getActionableParent(node);

  if (scopedUnderParent) {
    scopedUnderParent = scopedUnderParent.styleName;
  }

  if (node.hasSpringAnimation) {
    state.isAnimated = true;
    state.hasSpringAnimation = true;
    state.animations[node.id] = node.animations;
    state.scopes = node.scopes;
  }

  let id = null;

  if (isTable(node) && hasRowStyles(node)) {
    id = createId(node, state, false);
    getTableRowCss({
      node,
      state,
      id,
      scopedUnderParent
    });
  }

  let css = [getStaticCss({
    node,
    scopedUnderParent,
    state,
    allowedStyleKeys
  }), node.isAnimated && getAnimatedCss(node), getDynamicCss({
    node,
    scopedUnderParent,
    state,
    allowedStyleKeys
  })].filter(Boolean);

  if (css.length > 0) {
    if (id === null) {
      id = createId(node, state);
    } else if (isTable(node)) {
      if (node.className) {
        node.className.push(`\${styles.${id}}`);
      }
    }

    state.styles[id] = `css({label: '${id}',\n  ${css.join(',\n  ')}})`;
    state.stylesOrder.push(id);
  }
}

let composeStyles = (node, styles, scopedUnderParent) => {
  let allowedStyleKeys = getAllowedStyleKeys(node);

  if (hasKeysInChildren(styles.dynamic)) {
    let cssStatic = Object.keys(styles.static).filter(key => allowedStyleKeys.includes(key) && hasKeys(styles.static[key])).map(key => asCss(asStaticCss(styles.static[key], Object.keys(styles.dynamic[key])), key, scopedUnderParent).join('\n'));
    cssStatic = cssStatic.join(',\n');
    let cssDynamic = Object.keys(styles.dynamic).filter(key => allowedStyleKeys.includes(key) && hasKeys(styles.dynamic[key])).map(key => asCss(asDynamicCss(styles.dynamic[key]), key, scopedUnderParent).join('\n')).join(',\n');
    return {
      cssDynamic,
      cssStatic
    };
  }

  let cssStatic = Object.keys(styles.static).filter(key => allowedStyleKeys.includes(key) && hasKeys(styles.static[key])).map(key => asCss(asStaticCss(styles.static[key]), key, scopedUnderParent).join('\n')).join(',\n');
  return {
    cssStatic
  };
};

let getStaticCss = ({
  node,
  scopedUnderParent,
  state,
  allowedStyleKeys
}) => {
  let style = node.style.static;
  if (!hasKeysInChildren(style)) return false;
  state.cssStatic = true;
  let hasDynamicCss = hasKeysInChildren(node.style.dynamic);
  return Object.keys(style).filter(key => allowedStyleKeys.includes(key) && hasKeys(style[key])).map(key => asCss(asStaticCss(style[key], hasDynamicCss ? Object.keys(node.style.dynamic[key]) : []), key, scopedUnderParent).join('\n')).join(',\n');
};

let getDynamicCss = ({
  node,
  scopedUnderParent,
  state,
  allowedStyleKeys
}) => {
  let style = node.style.dynamic;
  if (!hasKeysInChildren(style)) return false;
  state.cssDynamic = true;
  node.styleName = node.nameFinal;

  if (node.hasSpringAnimation) {
    state.render.push(` style={{${getAnimatedStyles(node, state.isReactNative)},${getDynamicStyles(node)}}}`);
  } else {
    let inlineDynamicStyles = getDynamicStyles(node);

    if (inlineDynamicStyles) {
      state.render.push(` style={{${inlineDynamicStyles}}}`);
    }
  }

  return Object.keys(style).filter(key => allowedStyleKeys.includes(key) && hasKeys(style[key])).map(key => asCss(asDynamicCss(style[key]), key, scopedUnderParent).join('\n')).join(',\n');
};

let getAnimatedCss = node => {
  if (node.hasTimingAnimation) {
    let transition = uniq(getTimingProps(node).map(makeTransition)).join(', ');
    return `\ntransition: '${transition}',\nwillChange: '${getUniqueNames(node)}'`;
  }

  return `\nwillChange: '${getUniqueNames(node)}'`;
};

let getUniqueNames = node => {
  let names = [...new Set(getAllAnimatedProps(node, false).map(prop => prop.name))];
  return uniq(names.map(name => ensurePropName(name))).join(', ');
};

let ensurePropName = name => {
  switch (name) {
    case 'rotate':
    case 'rotateX':
    case 'rotateY':
    case 'scale':
    case 'scaleX':
    case 'scaleY':
    case 'translateX':
    case 'translateY':
      return 'transform';

    case 'shadowColor':
    case 'shadowBlur':
    case 'shadowOffsetX':
    case 'shadowOffsetY':
    case 'shadowSpread':
    case 'shadowInset':
      return 'box-shadow';

    default:
      return toSlugCase(name);
  }
};

let makeTransition = ({
  name,
  animation
}) => [ensurePropName(name), `${animation.duration}ms`, toSlugCase(animation.curve), animation.delay && `${animation.delay}ms`].filter(Boolean).join(' ');

let asDynamicCss = styles => Object.keys(styles).map(prop => `${prop}: ${styles[prop]}`);

let safe$1 = str => typeof str === 'string' ? `"${str.replace(/"/g, "'")}"` : str;

let asStaticCss = (styles, dynamicStyles = []) => Object.keys(styles).filter(prop => !dynamicStyles.includes(prop)).map(prop => `${prop}: ${safe$1(styles[prop])}`);

let systemScopeToCssKey = {
  isDisabled: 'disabled',
  // isHovered: 'hover:enabled',
  isFocused: 'focus:enabled'
};

let ensureSystemScopeCssKey = key => systemScopeToCssKey[key] || key;

let asCss = (styles, key, scopedUnderParent) => {
  let css = [];

  if (key !== 'base') {
    if (scopedUnderParent) {
      let parent = `.\${styles.${scopedUnderParent}}`;
      let theKey = ensureSystemScopeCssKey(key);
      css.push(`[\`${parent}:${theKey} &\`]: {`);
    } else if (key === 'isDisabled' || // key === 'isHovered' ||
    key === 'isFocused') {
      css.push(`"&:${ensureSystemScopeCssKey(key)}": {`);
    } else if (key === 'isPlaceholder') {
      css.push(`"&::placeholder": {`);
    }
  }

  css.push(styles.join(',\n'));
  if (key !== 'base') css.push(`}`);
  return css;
};

let getTableRowCss = ({
  node,
  state,
  id,
  scopedUnderParent
}) => {
  let normalStyles = {};
  let alternateStyles = {};
  Object.entries(node.style).forEach(([type, typeScopes]) => {
    if (!(type in alternateStyles)) {
      alternateStyles[type] = {};
    }

    if (!(type in normalStyles)) {
      normalStyles[type] = {};
    }

    Object.entries(typeScopes).forEach(([scope, scopeStyles]) => {
      if (!(scope in alternateStyles[type])) {
        alternateStyles[type][scope] = {};
      }

      if (!(scope in normalStyles[type])) {
        normalStyles[type][scope] = {};
      }

      Object.entries(scopeStyles).forEach(([key, value]) => {
        switch (key) {
          case 'rowColor':
            normalStyles[type][scope]['color'] = value;
            delete node.style[type][scope][key];
            break;

          case 'rowBackgroundColor':
            normalStyles[type][scope]['backgroundColor'] = value;
            delete node.style[type][scope][key];
            break;

          case 'rowColorAlternate':
            alternateStyles[type][scope]['color'] = value;
            delete node.style[type][scope][key];
            break;

          case 'rowBackgroundColorAlternate':
            alternateStyles[type][scope]['backgroundColor'] = value;
            delete node.style[type][scope][key];
            break;
        }
      });
    });
  });
  let {
    cssDynamic: normalDynamic,
    cssStatic: normalStatic
  } = composeStyles(node, normalStyles, scopedUnderParent);
  let {
    cssDynamic: alternateDynamic,
    cssStatic: alternateStatic
  } = composeStyles(node, alternateStyles, scopedUnderParent);
  let normalCss = `${normalStatic ? `${normalStatic}` : ''} ${normalDynamic ? `, ${normalDynamic}` : ''}`;
  let alternateCss = `${alternateStatic ? `${alternateStatic}` : ''} ${alternateDynamic ? `, ${alternateDynamic}` : ''}`;
  node.hasDynamicRowStyles = !!(normalDynamic || alternateDynamic);
  state.render.push(` rowClassName={styles.${id}Row}`);
  state.styles[`${id}Row`] = `css({ display: 'flex'
    ${normalCss ? `, ${normalCss}` : ''}
    ${alternateCss ? `, "&:nth-child(even)": {${alternateCss}}` : ''}
    })`;
  state.stylesOrder.push(`${id}Row`);
};

let enter$f = (node, parent, state) => {
  if (node.children && node.children.some(child => child.format)) {
    state.isFormatted = true;
    state.formats = [];
    node.children.filter(child => child.format).forEach(child => state.formats.push(child.format));
  } else if (node.format && !parent) {
    state.isFormatted = true;
    state.formats = [];
    state.formats.push(node.format);
  }
};

function enter$g(node, parent, state) {
  if (!node.action || 'userSelect' in node.style.static.base) return;
  node.style.static.base.userSelect = 'none';
}

function enter$h(node, parent, state) {
  if (node.name === 'ref') {
    if (!parent.isBasic) {
      state.hasRefs = true;
    } // TODO swap for React.forwardRef


    state.render.push(` ${parent.isDynamic ? 'innerRef' : 'ref'}=${wrap(node.value)}`);
    return true;
  }
}

let PROPS_THAT_IMPLY_CODE_FOR_OTHERS = {
  fontFamily: 'fontWeight',
  shadowOffsetX: 'shadowOffsetY',
  shadowOffsetY: 'shadowOffsetX'
};
function enter$i(node, parent, state) {
  if (!isStyle(node) || !parent.isBasic || isSvg(parent) && state.isReactNative || parent.name === 'SvgGroup') return;
  let code = isSlot(node);

  if (!code && state.isReactNative) {
    let otherProp = PROPS_THAT_IMPLY_CODE_FOR_OTHERS[node.name];

    if (otherProp) {
      code = isSlot(getProp(parent, otherProp));
    }
  }

  let {
    _isProp,
    _isScoped,
    ...styleForProperty
  } = state.getStyleForProperty(node, parent, state, code);

  if (_isProp) {
    Object.keys(styleForProperty).forEach(k => state.render.push(` ${k}=${safe(styleForProperty[k], node)}`));
  } else {
    let hasMatchingParent = parent && node.isDynamic ? checkParentStem(node, getStyleType(node)) : false;
    let target = code || _isScoped || hasMatchingParent ? parent.style.dynamic : parent.style.static;
    Object.assign(target[getStyleType(node)], styleForProperty);
  }

  return true;
}

let HAS_RESTRICTED_CHARACTERS = /[{}<>/]/;
function enter$j(node, parent, state) {
  if (node.name === 'text' && parent.name === 'Text') {
    if (state.data && node.value === 'props.value') {
      parent.explicitChildren = '{data.value}';
    } else if (hasCustomScopes(node, parent)) {
      parent.explicitChildren = wrap(getScopedCondition(node, parent, state));
    } else if (isSlot(node)) {
      parent.explicitChildren = wrap(node.value);
    } else if (HAS_RESTRICTED_CHARACTERS.test(node.value)) {
      parent.explicitChildren = `{"${node.value}"}`;
    } else {
      parent.explicitChildren = node.value;
    }

    return true;
  }
}

function enter$k(node, parent, state) {
  if (node.isBasic || !state.viewPath) return; // this is something we may use when going into dynamic paths through data
  // state.render.push(`viewPath={\`\${props.viewPath}/${state.name}\`}`)

  state.render.push(`viewPath="${state.viewPath}/${node.name}"`);
}

let blacklist = ['classname', 'format', 'goto', 'isfragment', 'ismodal', 'onclickid', 'onclickselected', 'onclickselectedtype', 'onclickusediv', 'perspective', 'rotatez', 'scalez', 'teleportto', 'transformoriginz', 'translatez', 'type'];
var isValidPropertyForBlock = ((node, parent, state) => !blacklist.includes(node.name.toLowerCase()));

function enter$l(node, parent, state) {
  if (node.isFragment) return false;
  enter$e(node, parent, state);
  enter$c(node);
  enter$d(node, parent, state);
  enter$f(node, parent, state);
  enter$k(node, parent, state);
  node.properties.forEach(propNode => {
    if (propNode.name === 'lazy' || propNode.name === 'at' || propNode.name === 'when' || propNode.name === 'onWhen' || propNode.tags.unsupportedShorthand || !isValidPropertyForBlock(propNode) && node.isBasic || propNode.name === 'from' && (node.name === 'List' || node.name === 'Table') || propNode.name === 'key' && parent.isList || propNode.name === 'pass' && node.isList || propNode.name === 'width' && isColumn(node)) return;
    !enter$h(propNode, node, state) && !enter$i(propNode, node, state) && !enter$j(propNode, node, state) && enter$3(propNode, node, state);
  });
  enter$g(node);
  leave$6(node, parent, state);
  leave$5(node, parent, state);
}

let enter$m = (node, parent, state) => {
  let blockName = node.is || node.name;

  if (typeof state.testIds[blockName] === 'number') {
    state.testIds[blockName]++;
    blockName = `${blockName}:${state.testIds[blockName]}`;
  } else {
    state.testIds[blockName] = 0;
  }

  node.testId = blockName;
};

function enter$n(node, parent, state) {
  if (!isTable(node)) return;
  state.render.push(` width={width} height={height} rowCount={Array.isArray(props.from) ? props.from.length : 0} rowGetter={({ index }) => props.from[index]}`);
}
function leave$7(node, parent, state) {
  if (!isTable(node)) return;
  state.render.push(`)}</AutoSizer>`);
}

let enter$o = [enter$9, enter$m, enter$b, enter$a, enter$n, enter$4, enter$2, enter$5, enter$7, enter, enter$1, enter$l, enter$6, enter$8];
let leave$8 = [leave$2, leave, leave$1, leave$3, leave$7, leave$4];

var visitor = /*#__PURE__*/Object.freeze({
  __proto__: null,
  enter: enter$o,
  leave: leave$8
});

function getStyleForProperty(node, parent, state, code) {
  let scopedVar = setScopedVar(node, parent, state);

  if (scopedVar) {
    switch (node.name) {
      case 'rotate':
      case 'rotateX':
      case 'rotateY':
      case 'scale':
      case 'scaleX':
      case 'scaleY':
      case 'translateX':
      case 'translateY':
        return {
          _isScoped: true,
          transform: `'${getTransform(node, parent)}'`
        };

      case 'shadowColor':
      case 'shadowBlur':
      case 'shadowOffsetX':
      case 'shadowOffsetY':
      case 'shadowSpread':
      case 'shadowInset':
        {
          let shadow = getShadow(node, parent, state);
          let key = Object.keys(shadow)[0];
          return {
            _isScoped: true,
            [key]: `'${shadow[key]}'`
          };
        }

      default:
        return {
          _isScoped: true,
          [node.name]: scopedVar
        };
    }
  }

  switch (node.name) {
    case 'appRegion':
      return {
        WebkitAppRegion: maybeAsVar(node, code)
      };

    case 'backgroundImage':
      return {
        backgroundImage: code ? `\`url(\${${asVar(node)}})\`` : `url("${node.value}")`
      };

    case 'fontFamily':
      return {
        fontFamily: code ? asVar(node) : maybeAddFallbackFont(node.value)
      };

    case 'shadowColor':
    case 'shadowBlur':
    case 'shadowOffsetX':
    case 'shadowOffsetY':
    case 'shadowSpread':
    case 'shadowInset':
      return getShadow(node, parent, state);

    case 'rotate':
    case 'rotateX':
    case 'rotateY':
    case 'scale':
    case 'scaleX':
    case 'scaleY':
    case 'translateX':
    case 'translateY':
      return {
        transform: getTransform(node, parent)
      };

    case 'transformOriginX':
    case 'transformOriginY':
      return {
        transformOrigin: getTransformOrigin(node, parent)
      };

    case 'zIndex':
      return {
        zIndex: code ? asVar(node) : parseInt(node.value, 10)
      };

    default:
      return {
        [node.name]: maybeAsVar(node, code)
      };
  }
}

let maybeAsVar = (prop, code) => code ? asVar(prop) : maybeMakeHyphenated(prop);

let asVar = prop => `'var(--${prop.name})'`;

let setScopedVar = (prop, block, state) => {
  if (prop.scope === 'isHovered' || prop.scope === 'isFocused' || prop.scope === 'isDisabled') return false;
  let scopedCondition = getScopedCondition(prop, block, state);
  return scopedCondition && asVar(prop);
};

let getPropValue$1 = (prop, block, state, unit = '') => {
  if (!prop) return false;
  let scopedVar = setScopedVar(prop, block, state);
  if (scopedVar) return scopedVar;

  if (prop.tags.slot) {
    return `var(--${prop.name})`;
  }

  return typeof prop.value === 'number' ? `${prop.value}${unit}` : prop.value;
};

let getShadow = (node, parent, state) => {
  let isText = parent.name === 'Text';
  let shadowColor = getProp(parent, 'shadowColor', node.scope);
  let shadowBlur = getProp(parent, 'shadowBlur', node.scope);
  let shadowOffsetX = getProp(parent, 'shadowOffsetX', node.scope);
  let shadowOffsetY = getProp(parent, 'shadowOffsetY', node.scope);
  let shadowSpread = getProp(parent, 'shadowSpread', node.scope);
  let shadowInset = getProp(parent, 'shadowInset', node.scope);
  let shadowInsetValue = getPropValue$1(shadowInset, parent, state);
  let value = [!isText && (typeof shadowInsetValue === 'string' && /var\(/.test(shadowInsetValue) ? shadowInsetValue : shadowInsetValue && 'inset'), getPropValue$1(shadowOffsetX, parent, state, 'px'), getPropValue$1(shadowOffsetY, parent, state, 'px'), getPropValue$1(shadowBlur, parent, state, 'px'), !isText && getPropValue$1(shadowSpread, parent, state, 'px'), getPropValue$1(shadowColor, parent, state)].filter(Boolean).join(' ').replace(/'/g, '');

  if (isSlot(shadowColor) || isSlot(shadowBlur) || isSlot(shadowOffsetY) || isSlot(shadowOffsetX) || isSlot(shadowSpread) || isSlot(shadowInset)) {
    value = `\`${value}\``;
  }

  return {
    [isText ? 'textShadow' : 'boxShadow']: value
  };
};

let getTransformValue = (prop, parent, unit) => {
  if (!prop) return false;
  return `${prop.name}(${getPropValue$1(prop, parent, unit)})`;
};

let getTransform = (node, parent) => {
  let rotate = getProp(parent, 'rotate', node.scope);
  let rotateX = getProp(parent, 'rotateX', node.scope);
  let rotateY = getProp(parent, 'rotateY', node.scope);
  let scale = getProp(parent, 'scale', node.scope);
  let scaleX = getProp(parent, 'scaleX', node.scope);
  let scaleY = getProp(parent, 'scaleY', node.scope);
  let translateX = getProp(parent, 'translateX', node.scope);
  let translateY = getProp(parent, 'translateY', node.scope);
  let value = [getTransformValue(rotate, parent, 'deg'), getTransformValue(rotateX, parent, 'deg'), getTransformValue(rotateY, parent, 'deg'), getTransformValue(scale, parent, ''), getTransformValue(scaleX, parent, ''), getTransformValue(scaleY, parent, ''), getTransformValue(translateX, parent, 'px'), getTransformValue(translateY, parent, 'px')].filter(Boolean).join(' ');

  if (isSlot(rotate) || isSlot(rotateX) || isSlot(rotateY) || isSlot(scale) || isSlot(scaleX) || isSlot(scaleY) || isSlot(translateX) || isSlot(translateY)) {
    value = `\`${value}\``;
  } // TODO FIXME this is a hack to remove strings because my head is fried
  // and yeah it does what we need for now :)


  return value.replace(/'/g, '');
};

let getTransformOrigin = (node, parent) => {
  let transformOriginX = getProp(parent, 'transformOriginX', node.scope);
  let transformOriginY = getProp(parent, 'transformOriginY', node.scope);
  let value = [getPropValue$1(transformOriginX, parent, Number.isInteger(transformOriginX.value) ? 'px' : ''), getPropValue$1(transformOriginY, parent, Number.isInteger(transformOriginY.value) ? 'px' : '')].filter(Boolean).join(' ');

  if (isSlot(transformOriginX) || isSlot(transformOriginY)) {
    value = `\`${value}\``;
  }

  return value;
};

var getStyles = (({
  styles,
  stylesOrder
}) => {
  if (!hasKeys(styles)) return '';
  let res = [`let styles = {}`];
  stylesOrder.forEach(id => {
    res.push(`styles.${id} = ${styles[id]}`);
  });
  return res.join('\n');
});

let isUrl = str => /^https?:\/\//.test(str);

function getImageSource(node, parent, state) {
  let scopes = getScopes(node, parent);

  if (scopes && (isUrl(node.value) || node.tags.slot)) {
    return wrap(getScopedCondition(node, parent, state));
  } else if (isUrl(node.value) || node.tags.slot) {
    if (node.defaultValue && !isUrl(node.defaultValue)) {
      state.slots.forEach(item => {
        if (item.defaultValue === node.defaultValue) {
          item.type = 'import';
          let name = toCamelCase(item.defaultValue);

          if (!state.images.includes(item.defaultValue)) {
            state.images.push({
              name,
              file: item.defaultValue
            });
          }

          item.defaultValue = name;
        }
      });
    }

    return safe(node.value);
  } else {
    if (scopes) {
      pushImageToState(state, scopes.scopedNames, scopes.paths);
    }

    let name = toCamelCase(node.value);

    if (!state.images.includes(node.value)) {
      state.images.push({
        name,
        file: node.value
      });
    }

    return scopes ? wrap(getScopedImageCondition(scopes.scopedProps, scopes.scopedNames, name)) : `{${name}}`;
  }
}

let CHILD_VALUES$2 = /props\.(isSelected|isHovered|isFocused|isSelectedHovered)/;
let ON_IS_SELECTED = /(onClick|onPress|goTo)/;
function getValueForProperty(node, parent, state) {
  if (state.data && (node.value === '!props.value' || node.value === 'props.value' || node.value === 'props.onSubmit' || node.value === 'props.onChange' || node.value === 'props.isInvalid' || node.value === 'props.isInvalidInitial' || node.value === 'props.isValid' || node.value === 'props.isValidInitial' || node.value === 'props.onSubmit')) {
    return {
      [node.name]: `{${node.value.replace('props.', 'data.')}}`
    };
  } else if (hasCustomBlockParent(parent) && CHILD_VALUES$2.test(node.value)) {
    return {
      [node.name]: `{${node.value.replace('props.', 'childProps.')}}`
    };
  } else if (isValidImgSrc(node, parent)) {
    return {
      src: getImageSource(node, parent, state)
    };
  } else if (parent.isBasic && node.name === 'isDisabled') {
    return {
      disabled: safe(node.value, node)
    };
  } else if (getScopedCondition(node, parent, state)) {
    return {
      [node.name]: safe(getScopedCondition(node, parent, state))
    };
  } else if (/^on[A-Z]/.test(node.name) && node.slotName === 'setFlowTo') {
    let flowPath = getFlowPath(node, parent, state);
    state.use('ViewsUseFlow');
    state.setFlowTo = true;
    let ret = {
      [node.name]: `{() => setFlowTo('${flowPath}')}`
    };

    if (!parent.isBasic && ON_IS_SELECTED.test(node.name)) {
      state.useFlow = true;
      ret[node.name.replace(ON_IS_SELECTED, 'isSelected')] = `{flow.has('${flowPath}')}`;
    }

    if (parent.isBasic && ON_IS_SELECTED.test(node.name)) {
      state.useIsHovered = true;
      ret['...'] = `${node.name.replace(ON_IS_SELECTED, 'isHovered')}Bind`;
    }

    return ret;
  } else if (parent.isBasic && ON_IS_SELECTED.test(node.name)) {
    state.useIsHovered = true;
    return {
      '...': `${node.name.replace(ON_IS_SELECTED, 'isHovered')}Bind`,
      [node.name]: safe(node.value, node)
    };
  } else if (CHILD_VALUES$2.test(node.value) && !!getActionableParent(parent) && !parent.isBasic) {
    // TODO support more than one hover/selected in the same block - let's wait
    // for a use case
    if (/isHovered/.test(node.value)) {
      return {
        [node.name]: safe(node.value.replace('props.', ''), node)
      };
    } else if (/isSelected/.test(node.value)) {
      let actionableParent = getActionableParent(parent);
      let actionableProp = getProp(actionableParent, 'onClick') || getProp(actionableParent, 'goTo');

      if (!actionableProp.defaultValue) {
        return {
          [node.name]: safe(node.value, node)
        };
      }

      let flowPath = getFlowPath(actionableProp, actionableParent, state);
      state.use('ViewsUseFlow');
      state.useFlow = true;
      return {
        [node.name]: `{flow.has('${flowPath}')}`
      };
    } else {
      return {
        [node.name]: safe(node.value, node)
      };
    }
  } else {
    return {
      [node.name]: safe(node.value, node)
    };
  }
}

function makeGetImport({
  imports,
  getSystemImport,
  view,
  viewsById,
  viewsToFiles
}) {
  return function getImport(id, isLazy) {
    if (imports[id]) return imports[id];
    let externalImport = getSystemImport(id, view.file);
    if (externalImport) return externalImport;

    if (!viewsById.has(id)) {
      throw new Error(`Import "${id}" doesn't exist. It's being imported from ${view.id}.`);
    }

    let importView = getViewRelativeToView({
      id,
      view,
      viewsById,
      viewsToFiles
    });

    if (!importView) {
      throw new Error(`Import "${id}" doesn't exist. It's being imported from ${view.id}.`);
    }

    let importFile = importView.file;

    if (importView.logic) {
      importFile = importView.logic;
    } else if (!importView.custom) {
      importFile = path.join(path.dirname(importFile), 'view.js');
    }

    let importPath = relativise(view.file, importFile);
    return isLazy ? `let ${id} = React.lazy(() => import('${importPath}'))` : `import ${id} from '${importPath}'`;
  };
}

var restrictedNames = ['Block', 'Capture', 'CaptureTextArea', 'Children', 'Column', 'Horizontal', 'Image', 'List', 'ViewsModalOverlay', 'ViewsModalOverlayContent', 'Spring', 'Svg', 'SvgCircle', 'SvgDefs', 'SvgEllipse', 'SvgGroup', 'SvgLine', 'SvgLinearGradient', 'SvgPath', 'SvgPolygon', 'SvgPolyline', 'SvgRadialGradient', 'SvgRect', 'SvgStop', 'SvgSymbol', 'SvgText', 'SvgUse', 'Table', 'Text', 'Timing', 'Vertical', 'View'];

var getBody = (({
  state,
  name
}) => {
  let render = state.render.join('\n');
  let animated = [];

  if (state.isAnimated) {
    Object.keys(state.animations).forEach(blockId => {
      Object.values(state.animations[blockId]).forEach(item => {
        let {
          curve,
          ...configValues
        } = item.animation.properties;
        if (!state.isReactNative && curve !== 'spring') return;
        let spring = ['{', '"config": {'];
        Object.entries(configValues).forEach(([k, v]) => {
          spring.push(`${k}: ${JSON.stringify(v)},`);
        });

        if (curve !== 'spring' && curve !== 'linear') {
          spring.push(`"easing": Easing.${curve.replace('ease', 'easeCubic')},`);
        }

        spring.push('},');
        let toValue = [];
        let fromValue = [];
        Object.values(item.props).forEach(prop => {
          prop.scopes.reverse();
          let value = prop.scopes.reduce((current, scope) => `props.${scope.name}? ${JSON.stringify(scope.value)} : ${current}`, JSON.stringify(prop.value));
          toValue.push(`${JSON.stringify(prop.name)}: ${value}`);
          fromValue.push(`${JSON.stringify(prop.name)}: ${JSON.stringify(prop.scopes[0].value)}`);
        });
        spring.push(`"from": {${fromValue.join(',')}},`);
        spring.push(`"to": {${toValue.join(',')}},`);
        spring.push('}');
        animated.push(`let animated${blockId}${item.index > 0 ? item.index : ''} = useSpring(${spring.join('\n')})`);
      });
    });
  }

  let flow = [];

  if (state.useFlow || state.flow === 'separate' && state.uses.includes('ViewsUseFlow')) {
    flow.push(`let flow = fromFlow.useFlow()`);
  }

  if (state.setFlowTo) {
    flow.push(`let setFlowTo = fromFlow.useSetFlowTo()`);
  }

  let data = [];

  if (state.data) {
    switch (state.data.type) {
      case 'show':
      case 'capture':
        {
          data.push(`let data = fromData.useData({ path: '${state.data.path}', `);
          maybeDataContext(state.data, data);
          maybeDataFormat(state.dataFormat, data);
          maybeDataValidate(state.dataValidate, data);
          data.push('})');
          break;
        }
    }
  }

  if (state.hasRefs) {
    return `export default class ${name} extends React.Component {
  render() {
    let { props } = this
    return (${render})
  }
}`;
  } else {
    let ret = render ? `(${render})` : null;
    return `export default function ${name}(props) {
    ${state.useIsBefore ? 'let isBefore = useIsBefore()' : ''}
    ${state.useIsHovered ? 'let [isHovered, isSelectedHovered, isHoveredBind] = useIsHovered(props)' : ''}
    ${state.useIsMedia ? 'let isMedia = useIsMedia()' : ''}
    ${animated.join('\n')}
    ${flow.join('\n')}
    ${data.join('\n')}

  return ${ret}
}`;
  }
});

function maybeDataContext(dataDefinition, data) {
  if (dataDefinition.context === null) return;
  data.push(`context: '${dataDefinition.context}',`);
}

function maybeDataFormat(format, data) {
  if (!format) return;

  if (format.formatIn) {
    data.push(`formatIn: '${format.formatIn}',`);
  }

  if (format.formatOut) {
    data.push(`formatOut: '${format.formatOut}',`);
  }
}

function maybeDataValidate(validate, data) {
  if (!validate || validate.type !== 'js') return;
  data.push(`validate: '${validate.value}',`);

  if (validate.required) {
    data.push('validateRequired: true,');
  }
}

let stringify = slot => {
  if (slot.type === 'array') {
    return JSON.stringify([]);
  } else if (/^[0-9]+$/.test(slot.defaultValue) || slot.type === 'import') {
    return slot.defaultValue;
  } else {
    return JSON.stringify(slot.defaultValue);
  }
};

var getDefaultProps = (({
  state,
  name
}) => {
  let slots = state.slots.filter(slot => slot.defaultValue !== false).map(slot => `${slot.name}: ${stringify(slot)}`);
  return slots.length === 0 ? '' : `${name}.defaultProps = {${slots.join(',\n')}}`;
});

var SVG = ['Svg', 'SvgCircle', 'SvgEllipse', 'SvgDefs', 'SvgGroup', 'SvgLinearGradient', 'SvgRadialGradient', 'SvgLine', 'SvgPath', 'SvgPolygon', 'SvgPolyline', 'SvgRect', 'SvgSymbol', 'SvgText', 'SvgUse', 'SvgDefs', 'SvgStop'];

let NATIVE = ['Animated', 'Image', 'KeyboardAvoidingView', 'FlatList', 'ScrollView', 'StyleSheet', 'Text', 'TextInput', 'TouchableWithoutFeedback', 'TouchableHighlight', 'View'];

let sortAlphabetically = (a, b) => {
  return a === b ? 0 : a < b ? -1 : 1;
};

let importsFirst = (a, b) => {
  let aIsImport = a.startsWith('import');
  let bIsImport = b.startsWith('import');
  if (aIsImport && bIsImport || !aIsImport && !bIsImport) return sortAlphabetically(a, b);
  if (aIsImport) return -1;
  if (bIsImport) return 1;
};

var getDependencies = ((state, getImport) => {
  let usesNative = [];
  let usesSvg = [];

  let useNative = d => {
    if (!usesNative.includes(d)) {
      usesNative.push(d);
    }
  };

  let useSvg = d => {
    if (!usesSvg.includes(d)) {
      usesSvg.push(d);
    }
  };

  let dependencies = [`import React from 'react'`];
  state.uses.sort().forEach(d => {
    if (state.isReactNative && NATIVE.includes(d)) {
      useNative(d);
    } else if (state.isReactNative && SVG.includes(d)) {
      useSvg(d === 'Svg' ? d : d === 'SvgGroup' ? `G as SvgGroup` : `${d.replace('Svg', '')} as ${d}`);
    } else if (d === 'Table') ; else if (/^[A-Z]/.test(d)) {
      let importStatement = getImport(d, state.lazy[d]);
      dependencies.push(importStatement);

      if (/logic\.js'/.test(importStatement)) {
        dependencies.push(`${d}.displayName = '${d}Logic'`);
      }
    }
  });

  if (state.isReactNative) ; else {
    state.fonts.forEach(usedFont => dependencies.push(state.getFontImport(usedFont.id)));
  } // TODO we probably want to check that the file exists and do something if it
  // doesn't, like warn the user at least?


  state.images.forEach(img => dependencies.push(`import ${img.name} from "${img.file}"`));

  if (state.cssDynamic || state.cssStatic) {
    dependencies.push('import { css } from "emotion"');
    state.dependencies.add('emotion');
  }

  if (state.isAnimated) {
    let animations = ['animated', (state.hasSpringAnimation || state.hasTimingAnimation && state.isReactNative) && 'useSpring'].filter(Boolean);

    if (animations.length > 0) {
      dependencies.push(`import { ${animations.join(', ')} } from "react-spring"`);
      state.dependencies.add('react-spring');

      if (state.hasTimingAnimation && state.isReactNative) {
        dependencies.push(`import * as Easing from 'd3-ease'`);
        state.dependencies.add('d3-ease');
      }
    }
  }

  if (state.isReactNative) {
    for (let component of state.animated) {
      dependencies.push(`let Animated${component} = animated(${component})`);
    }
  }

  if (state.isTable) {
    dependencies.push(`import { AutoSizer, Column, Table } from "@viewstools/tables/${state.isReactNative ? 'native' : 'dom'}"`);
    state.dependencies.add('@viewstools/tables');
  }

  if (usesSvg.length > 0) {
    let svg = usesSvg.filter(m => m !== 'Svg').join(', ');
    dependencies.push(`import Svg, { ${svg} } from 'react-native-svg'`);
  }

  if (usesNative.length > 0) {
    dependencies.push(`import { ${usesNative.join(', ')} } from '${state.reactNativeLibraryImport}'`);
  }

  if (state.useIsBefore) {
    dependencies.push(getImport('ViewsUseIsBefore'));
  }

  if (state.useIsHovered) {
    dependencies.push(getImport('ViewsUseIsHovered'));
  }

  if (state.useIsMedia) {
    dependencies.push(getImport('ViewsUseIsMedia'));
  }

  return dependencies.filter(Boolean).sort(importsFirst).join('\n');
});

var getFlatList = (({
  uses
}) => {
  return uses.includes('Animated') && uses.includes('FlatList') ? `let AnimatedFlatList = Animated.createAnimatedComponent(FlatList)` : '';
});

var toComponent = (({
  getImport,
  getStyles,
  name,
  state
}) => {
  // TODO Emojis should be wrapped in <span>, have role="img", and have an accessible description
  // with aria-label or aria-labelledby  jsx-a11y/accessible-emoji
  return `/* eslint-disable jsx-a11y/accessible-emoji, no-unused-vars, no-dupe-keys, react/jsx-no-duplicate-props */
// This file is auto-generated. Edit ${name}.view to change it. More info: https://github.com/viewstools/docs/blob/master/UseViews/README.md#viewjs-is-auto-generated-and-shouldnt-be-edited
${getDependencies(state, getImport)}

${getStyles(state, name)}
${getFlatList(state)}

${getBody({
    state,
    name
  })}
${getDefaultProps({
    state,
    name
  })}`;
});

function walk(ast, {
  enter,
  leave
}, state) {
  visit(ast, null, enter, leave, state);
}

function visit(node, parent, enter, leave, state) {
  if (!node) return;

  if (enter) {
    if (enter.some(fn => fn(node, parent, state))) return;
  }

  if (Array.isArray(node.children)) {
    node.children.forEach(child => {
      child.parent = node;
      visit(child, node, enter, leave, state);
    });
  }

  if (leave) {
    leave.forEach(fn => fn(node, parent, state));
  }
}

let imports = {
  ViewsModalOverlay: "import { DialogOverlay as ViewsModalOverlay, DialogContent as ViewsModalOverlayContent } from '@reach/dialog'"
};
var reactDom = (({
  getFontImport,
  getSystemImport,
  tools,
  view,
  viewsById,
  viewsToFiles
}) => {
  let name = view.id;
  let finalName = restrictedNames.includes(name) ? `${name}1` : name;

  if (name !== finalName) {
    console.warn(`// "${name}" is a Views reserved name.
      We've renamed it to "${finalName}", so your view should work but this isn't ideal.
      To fix this, change its file name to something else.`);
  }

  let state = {
    animated: new Set(),
    animations: {},
    cssDynamic: false,
    cssStatic: false,
    data: view.parsed.view.data,
    dataFormat: view.parsed.view.dataFormat,
    dataValidate: view.parsed.view.dataValidate,
    dependencies: new Set(),
    flow: null,
    setFlowTo: false,
    getFontImport: font => getFontImport(font, view),
    getStyleForProperty,
    getValueForProperty,
    hasRefs: false,
    images: [],
    isDynamic: false,
    isReactNative: false,
    isStory: id => {
      let viewInView = getViewRelativeToView({
        id,
        view,
        viewsById,
        viewsToFiles
      });
      return viewInView && !viewInView.custom && viewInView.parsed.view.isStory;
    },
    lazy: {},
    name: finalName,
    viewPath: view.parsed.view.viewPath,
    viewPathParent: view.parsed.view.viewPathParent,
    render: [],
    styles: {},
    stylesOrder: [],
    usedBlockNames: {
      [finalName]: 1,
      AutoSizer: 1,
      Column: 1,
      Table: 1
    },
    uses: [],
    testIdKey: 'data-testid',
    viewPathKey: 'data-view-path',
    testIds: {},
    tools,

    use(block, isLazy = false) {
      if (isLazy) {
        state.lazy[block] = true;
      }

      if (state.uses.includes(block) || /props/.test(block) || /^Animated/.test(block) || 'React.Fragment' === block || 'ViewsModalOverlayContent' === block || block === finalName) return;
      state.uses.push(block);
    },

    useIsBefore: view.parsed.view.useIsBefore,
    useIsMedia: view.parsed.view.useIsMedia
  }; // TIP: use the following code to trace generated code
  // let _push = state.render.push.bind(state.render)
  // state.render.push = item => {
  //   _push(item)
  //   if (item.includes("Some <isHovered")) {
  //     console.trace()
  //   }
  // }

  if (state.data) {
    state.use('ViewsUseData');
  }

  if (name !== finalName) {
    console.warn(`// ${name} is a Views reserved name. To fix this, change its file name to something else.`);
  }

  state.fonts = view.parsed.fonts;
  state.slots = view.parsed.slots;
  walk(view.parsed.view, visitor, state);
  return {
    code: toComponent({
      getImport: makeGetImport({
        imports,
        getSystemImport,
        view,
        viewsById,
        viewsToFiles
      }),
      getStyles,
      name: finalName,
      state
    }),
    dependencies: state.dependencies,
    flow: state.flow,
    flowDefaultState: state.flowDefaultState // TODO flow supported states
    // fonts: view.parsed.fonts,
    // slots: view.parsed.slots,

  };
});

let BORDER_RADIUS = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius'];
let enter$p = (node, parent, state) => {
  if (node.backgroundImage) {
    let source = getObjectAsString({
      uri: node.backgroundImage
    });
    let resizeMode = getProp(node, 'backgroundSize');
    resizeMode = safe(resizeMode ? resizeMode.value.value : 'cover');
    state.render.push(` resizeMode=${resizeMode} source={${source}}`); // hack until https://github.com/facebook/react-native/issues/8885
    // is fixed

    BORDER_RADIUS.forEach(prop => {
      if (hasProp(node, prop)) {
        let propNode = getProp(node, prop);
        state.render.push(` ${prop}={${propNode.value.value}}`);
      }
    });
  }
};

let keyboardType = {
  email: 'email-address',
  number: 'numeric',
  phone: 'phone-pad'
};
let enter$q = (node, parent, state) => {
  if (!node.isCapture) return;

  if (node.name === 'CaptureTextArea') {
    state.render.push(` multiline={true}`);
  } else {
    let type = getProp(node, 'type'); // TODO warn on parser
    // TODO support file upload in RN

    if (type.value === 'file') {
      type.value = 'text';
    }

    if (type.value === 'secure') {
      state.render.push(` secureTextEntry`);
    } else {
      if (isSlot(type)) {
        let dynamicKeyboardType = `
          ${type.value} === 'email'?
            '${keyboardType.email}' :
              ${type.value} === 'number'?
                '${keyboardType.number}' :
                ${type.value} === 'phone'?
                  '${keyboardType.phone}' : 'default'
        `;
        state.render.push(` keyboardType={${dynamicKeyboardType}}`);
      } else if (keyboardType[type.value]) {
        state.render.push(` keyboardType='${keyboardType[type.value]}'`);
      }
    }
  }

  let autoCorrect = getProp(node, 'autoCorrect');

  if (!autoCorrect) {
    state.render.push(` autoCorrect={false}`);
  }

  let underlineColorAndroid = getProp(node, 'underlineColorAndroid');

  if (!underlineColorAndroid) {
    state.render.push(` underlineColorAndroid="transparent"`);
  }

  let textAlignVertical = getProp(node, 'textAlignVertical');

  if (!textAlignVertical) {
    state.render.push(` textAlignVertical="top"`);
  }
};

var getBlockName$1 = ((node, parent, state) => {
  switch (node.name) {
    case 'Capture':
    case 'CaptureTextArea':
      return 'TextInput';

    case 'Horizontal':
    case 'Vertical':
      return getGroupBlockName$1(node, state);

    case 'List':
      return getListBlockName(node, state);

    case 'Text':
      if (node.isAnimated) {
        state.animated.add('Text');
        return 'AnimatedText';
      } else {
        return 'Text';
      }

    case 'Block':
    case 'View':
      return 'React.Fragment';

    default:
      return node.name;
  }
});

let getGroupBlockName$1 = (node, state) => {
  let name = 'View';

  if (node.isFragment) {
    name = 'React.Fragment';
  } else if (hasProp(node, 'goTo')) {
    node.goTo = true;
    let propNode = getProp(node, 'goTo');
    node.action = propNode.value;
  } else if (hasProp(node, 'onClick')) {
    let propNode = getProp(node, 'onClick');
    node.action = propNode.value;
  }

  if (hasProp(node, 'backgroundImage')) {
    let propNode = getProp(node, 'backgroundImage');
    node.backgroundImage = isSlot(propNode) ? propNode.value : JSON.stringify(propNode.value);
    name = 'Image';
  } else if (hasProp(node, 'overflowY', v => v === 'auto' || v === 'scroll')) {
    name = 'ScrollView';
  }

  if (node.isAnimated) {
    state.animated.add(name);
    name = `Animated${name}`;
  }

  return name;
};

let getListBlockName = (node, state) => {
  let base = hasProp(node, /^overflow/, v => v === 'auto' || v === 'scroll') ? 'FlatList' : 'View';

  if (node.isAnimated) {
    state.animated.add(base);
    return `Animated${base}`;
  } else {
    return base;
  }
};

function enter$r(node, parent, state) {
  // if (parent && !parent.isBasic && !node.isBasic) return true
  if (node.isFragment && node.children.length === 0) return true;

  if (node.isChildren) {
    state.hasAlreadyDefinedChildren = true;
    state.render.push(`{typeof props.children === 'function'? props.children({ isSelected: props.isSelected`);
    let useIsHovered = !!getActionableParent(node);

    if (useIsHovered) {
      state.useIsHovered = true;
      state.render.push(', isHovered, isSelectedHovered');
    }

    state.render.push(`}) : null}`);
    return true;
  }

  if (node.isFragment && node.name === 'View') {
    state.flow = getPropValueOrDefault(node, 'is', false);
    state.flowDefaultState = null;
  }

  if (isStory(node, state)) {
    state.use('ViewsUseFlow');
  }

  let name = getBlockName$1(node, parent, state);
  if (name === null) return true;

  if (name === 'Animated.FlatList') {
    state.use('FlatList');
    name = 'AnimatedFlatList';
  }

  state.use(node.isBasic ? name.replace(/^Animated/, '') : name, node.isLazy);
  node.nameFinal = name;
  if (handleTable(node, parent, state)) return true;
  state.render.push(`<${name}`);
}

let leave$9 = (node, parent, state) => {
  if (node.isFragment) return;
  let dynamicStyles = getNonAnimatedDynamicStyles(node);
  let baseStyle = null;
  let animatedStyle = null;
  let dynamicStyle = null;
  let containerStyle = null;

  if (node.ensureBackgroundColor && (!('backgroundColor' in node.style.static.base) || !('backgroundColor' in node.style.dynamic.base))) {
    node.style.static.base.backgroundColor = 'transparent';
  }

  if (hasKeys(node.style.static.base)) {
    let id = createId(node, state);

    if (node.nameFinal.includes('FlatList') && hasContentContainerStyleProp(node.style.static.base)) {
      state.styles[`${id}ContentContainer`] = getContentContainerStyleProps(node.style.static.base);
      node.style.static.base = removeContentContainerStyleProps(node.style.static.base);
      containerStyle = `styles.${id}ContentContainer`;
    }

    if (hasKeys(node.style.static.base)) {
      state.styles[id] = node.style.static.base;
      baseStyle = `styles.${id}`;
    }
  }

  if (node.isAnimated) {
    animatedStyle = getAnimatedStyles(node, state.isReactNative);
    state.isAnimated = true;
    state.animations[node.id] = node.animations;

    if (node.hasSpringAnimation) {
      state.hasSpringAnimation = true;
    }

    if (node.hasTimingAnimation) {
      state.hasTimingAnimation = true;
    }

    state.scopes = node.scopes;
  }

  if (hasKeys(dynamicStyles)) {
    if (node.nameFinal.includes('FlatList') && hasContentContainerStyleProp(dynamicStyles)) {
      let dynamicContainerStyle = getObjectAsString(getContentContainerStyleProps(dynamicStyles));
      dynamicStyles = removeContentContainerStyleProps(dynamicStyles);
      containerStyle = containerStyle ? `[${containerStyle},${dynamicContainerStyle}]` : dynamicContainerStyle;
    }

    if (hasKeys(dynamicStyles)) {
      dynamicStyle = getObjectAsString(dynamicStyles);
      dynamicStyle = dynamicStyle.substr(1, dynamicStyle.length - 2);
    }
  }

  if (baseStyle || animatedStyle || dynamicStyle) {
    let style = baseStyle;

    if (animatedStyle) {
      // TODO once https://github.com/drcmda/react-spring/issues/337 gets
      // fixed, come back to using the array notation
      style = `{...${baseStyle},${animatedStyle},${dynamicStyle || ''}}`;
    } else if (dynamicStyle) {
      style = `[${baseStyle},{${dynamicStyle}}]`;
    }

    state.render.push(` style={${style}}`);
  }

  if (containerStyle) {
    state.render.push(` contentContainerStyle={${containerStyle}}`);
  }
};

let blacklist$1 = ['appregion', 'backgroundimage', 'backgroundsize', 'classname', 'clippath', 'cursor', 'fontweight', 'format', 'goto', 'isdisabled', 'isfragment', 'onclickusediv', 'onsubmit', 'overflow', 'overflowx', 'overflowy', 'pagebreakinside', 'perspective', 'rotatez', 'scalez', 'shadowspread', 'texttransform', 'transformorigin', 'transformoriginz', 'transition', 'translatez', 'type', 'userselect'];
var isValidPropertyForBlock$1 = ((node, parent, state) => !blacklist$1.includes(node.name.toLowerCase()));

function enter$s(node, parent, state) {
  if (node.isFragment) return false;
  enter$e(node, parent, state);
  enter$f(node, parent, state);
  enter$k(node, parent, state);
  node.properties.forEach(propNode => {
    if (propNode.name === 'lazy' || propNode.name === 'at' || propNode.name === 'when' || propNode.name === 'onWhen' || propNode.tags.unsupportedShorthand || !isValidPropertyForBlock$1(propNode) && node.isBasic || propNode.name === 'from' && (node.name === 'List' || node.name === 'Table') || propNode.name === 'key' && parent.isList || propNode.name === 'pass' && node.isList || propNode.name === 'opacity' && state.isSvg || propNode.name === 'width' && isColumn(node)) return;
    !enter$h(propNode, node, state) && !enter$i(propNode, node, state) && !enter$j(propNode, node, state) && enter$3(propNode, node, state);
  });
  leave$9(node, parent, state);
}

let SVG_BLOCKS_WITH_OPACITY = ['SvgPath', 'SvgCircle', 'SvgEllipse', 'SvgPolygon', 'SvgPolyline', 'SvgRect', 'SvgText'];
function enter$t(node, parent, state) {
  if (node.name === 'Svg' && !parent) {
    state.isSvg = true;
    state.svgOpacity = getProp(node, 'opacity');
  } else if (state.isSvg && state.svgOpacity && SVG_BLOCKS_WITH_OPACITY.includes(node.name)) {
    if (hasProp(node, 'fill')) {
      node.properties.push({ ...state.svgOpacity,
        name: 'fillOpacity'
      });
    }

    if (hasProp(node, 'stroke')) {
      node.properties.push({ ...state.svgOpacity,
        name: 'strokeOpacity'
      });
    }
  }
}

let enter$u = (node, parent, state) => {
  let name = getBlockName$1(node, parent, state);

  if (name === 'Text' && parent && (parent.backgroundImage || parent.ensureBackgroundColor)) {
    node.ensureBackgroundColor = true;
  }

  if (node.action) {
    let block = 'TouchableWithoutFeedback';
    let isDisabled = getProp(node, 'isDisabled');
    let onClick = getProp(node, 'onClick');
    let onPress = wrap(onClick.value);

    if (/^on[A-Z]/.test(onClick.name) && onClick.slotName === 'setFlowTo') {
      // TODO warn if action is used but it isn't in actions (on parser)
      // TODO warn that there's setFlowTo without an id (on parser)
      let setFlowTo = getFlowPath(onClick, parent, state);
      state.use('ViewsUseFlow');
      state.setFlowTo = true;
      onPress = `{() => setFlowTo('${setFlowTo}')}`;
    }

    let key = getProp(node, 'key');
    state.use(block);
    state.render.push(`<${block}
          activeOpacity={0.7}
          onPress=${onPress}
          ${isDisabled ? `disabled=${wrap(isDisabled.value)}` : ''}
          underlayColor='transparent'
          ${node.isInList ? `key={${key ? key.value : 'index'}}` : ''}>`);
    node.wrapEnd = `</${block}>`;
  } else if (node.goTo) ;
};
let leave$a = (node, parent, state) => {
  if (node.wrapEnd) {
    state.render.push(node.wrapEnd);
  }
};

let enter$v = [enter$9, enter$m, enter$b, enter$u, enter$r, enter$n, enter$4, enter$t, enter$q, enter$p, enter$7, enter, enter$s, enter$6, enter$8];
let leave$b = [leave$2, leave, leave$1, leave$3, leave$7, leave$a, leave$4];

var visitor$1 = /*#__PURE__*/Object.freeze({
  __proto__: null,
  enter: enter$v,
  leave: leave$b
});

function getStyleForProperty$1(node, parent, state, code) {
  let scopedCondition = getScopedCondition(node, parent, state);

  if (scopedCondition) {
    switch (node.name) {
      case 'rotate':
      case 'rotateX':
      case 'rotateY':
      case 'scale':
      case 'scaleX':
      case 'scaleY':
      case 'translateX':
      case 'translateY':
        return {
          _isScoped: true,
          transform: getTransform$1(node, parent, state)
        };

      default:
        return {
          _isScoped: true,
          [node.name]: getScopedCondition(node, parent, state)
        };
    }
  }

  switch (node.name) {
    case 'borderTopLeftRadius':
    case 'borderTopRightRadius':
    case 'borderBottomLeftRadius':
    case 'borderBottomRightRadius':
      return {
        [parent.name === 'Image' ? 'borderRadius' : node.name]: node.value
      };

    case 'borderTopStyle':
    case 'borderBottomStyle':
    case 'borderLeftStyle':
    case 'borderRightStyle':
      return {
        borderStyle: node.value
      };

    case 'shadowColor':
      return decorateShadow({
        shadowColor: node.value
      });

    case 'shadowBlur':
      return decorateShadow({
        shadowRadius: node.value
      });

    case 'shadowOffsetX':
    case 'shadowOffsetY':
      return getShadowOffset(node, parent);

    case 'fontWeight':
    case 'fontFamily':
      return {
        fontFamily: getFontFamily(node, parent)
      };

    case 'rotate':
    case 'rotateX':
    case 'rotateY':
    case 'scale':
    case 'scaleX':
    case 'scaleY':
    case 'translateX':
    case 'translateY':
      return {
        transform: getTransform$1(node, parent, state)
      };

    case 'zIndex':
      return {
        zIndex: code ? node.value : parseInt(node.value, 10)
      };

    case 'color':
      // TODO handle this but differently as we don't have the placeholder tag anymore
      if (/Capture/.test(parent.name) && isTag(node, 'placeholder')) {
        return {
          _isProp: true,
          placeholderTextColor: node.value
        };
      } // Just returning the node.value in cases where if statement is not true
      // Otherwise it was falling through to the next case.


      return {
        color: node.value
      };

    case 'lineHeight':
      return {
        lineHeight: getLineHeight(node, parent)
      };

    default:
      return {
        [node.name]: maybeMakeHyphenated(node)
      };
  }
}

let getFontFamily = (node, parent, state) => {
  let fontWeight = getProp(parent, 'fontWeight'); // let key = node.key.value

  let fontFamily = node.value.replace(/\s/g, '');

  if (fontWeight && (node.tags.slot || fontWeight.tags.slot)) {
    return `\`${node.tags.slot ? '${props.fontFamily}' : fontFamily}-${fontWeight.tags.slot ? '${props.fontWeight}' : fontWeight.value}\``;
  }

  return fontWeight ? `${fontFamily}-${fontWeight.value}` : fontFamily;
};

let getLineHeight = (node, parent, state) => {
  let fontSize = getProp(parent, 'fontSize'); // using a default font size of 16 if none specified

  let fontSizeValue = fontSize ? fontSize.value : 16;
  return node.value * fontSizeValue;
};

let getShadowOffset = (node, parent, state) => {
  let shadowOffsetX = getProp(parent, 'shadowOffsetX');
  let shadowOffsetY = getProp(parent, 'shadowOffsetY');
  return decorateShadow({
    // iOS,
    shadowOffset: {
      width: shadowOffsetX ? shadowOffsetX.value : 0,
      height: shadowOffsetY ? shadowOffsetY.value : 0
    }
  });
};

let decorateShadow = obj => {
  obj.elevation = 1; // for Android

  obj.shadowOpacity = 1;
  return obj;
};

let getPropValue$2 = (prop, block, state, unit = '') => {
  if (!prop) return false;
  let scopedCondition = getScopedCondition(prop, block, state);

  if (scopedCondition) {
    return unit ? `\`\${${scopedCondition}}${unit}\`` : scopedCondition;
  }

  if (prop.tags.slot) {
    return `\${${prop.value}}${unit}`;
  }

  return typeof prop.value === 'number' && unit ? `${prop.value}${unit}` : prop.value;
};

let getTransformValue$1 = (prop, parent, state, unit) => prop && {
  [prop.name]: getPropValue$2(prop, parent, state, unit)
};

let getTransform$1 = (node, parent, state) => {
  let rotate = getProp(parent, 'rotate');
  let rotateX = getProp(parent, 'rotateX');
  let rotateY = getProp(parent, 'rotateY');
  let scale = getProp(parent, 'scale');
  let scaleX = getProp(parent, 'scaleX');
  let scaleY = getProp(parent, 'scaleY');
  let translateX = getProp(parent, 'translateX');
  let translateY = getProp(parent, 'translateY');
  return [getTransformValue$1(rotate, parent, state, 'deg'), getTransformValue$1(rotateX, parent, state, 'deg'), getTransformValue$1(rotateY, parent, state, 'deg'), getTransformValue$1(scale, parent, state), getTransformValue$1(scaleX, parent, state), getTransformValue$1(scaleY, parent, state), getTransformValue$1(translateX, parent, state), getTransformValue$1(translateY, parent, state)].filter(Boolean);
};

var getStyles$1 = (({
  styles
}) => hasKeys(styles) ? `let styles = StyleSheet.create(${JSON.stringify(styles)})` : '');

let isUrl$1 = str => /^https?:\/\//.test(str);

function getImageSource$1(node, parent, state) {
  let scopes = getScopes(node, parent);

  if (scopes && (isUrl$1(node.value) || node.tags.slot)) {
    return `{{ uri: ${getScopedCondition(node, parent, state)} }}`;
  } else if (isUrl$1(node.value) || node.tags.slot) {
    if (node.defaultValue && !isUrl$1(node.defaultValue)) {
      state.slots.forEach(item => {
        if (item.defaultValue === node.defaultValue) {
          item.type = 'import';
          let name = toCamelCase(item.defaultValue);

          if (!state.images.includes(item.defaultValue)) {
            state.images.push({
              name,
              file: item.defaultValue
            });
          }

          item.defaultValue = name;
        }
      });
    }

    return `{{ uri: ${node.tags.slot ? node.value : safe(node.value)} }}`;
  } else {
    if (scopes) {
      pushImageToState(state, scopes.scopedNames, scopes.paths);
    }

    let name = toCamelCase(node.value);

    if (!state.images.includes(node.value)) {
      state.images.push({
        name,
        file: node.value
      });
    }

    return scopes ? wrap(getScopedImageCondition(scopes.scopedProps, scopes.scopedNames, name)) : `{${name}}`;
  }
}

let CHILD_VALUES$3 = /props\.(isSelected|isHovered|isFocused|isSelectedHovered)/;
let ON_IS_SELECTED$1 = /(onClick|onPress|goTo)/;
function getValueForProperty$1(node, parent, state) {
  if (state.data && (node.value === '!props.value' || node.value === 'props.value' || node.value === 'props.onSubmit' || node.value === 'props.onChange' || node.value === 'props.isInvalid' || node.value === 'props.isInvalidInitial' || node.value === 'props.isValid' || node.value === 'props.isValidInitial' || node.value === 'props.onSubmit')) {
    return {
      [node.name]: `{${node.value.replace('props.', 'data.')}}`
    };
  } else if (hasCustomBlockParent(parent) && CHILD_VALUES$3.test(node.value)) {
    return {
      [node.name]: `{${node.value.replace('props.', 'childProps.')}}`
    };
  } else if (isValidImgSrc(node, parent)) {
    return !parent.isSvg && {
      source: getImageSource$1(node, parent, state)
    };
  } else if (getScopedCondition(node, parent, state)) {
    return {
      [node.name]: safe(getScopedCondition(node, parent, state))
    };
  } else if (/^on[A-Z]/.test(node.name) && node.slotName === 'setFlowTo') {
    let flowPath = getFlowPath(node, parent, state);
    state.use('ViewsUseFlow');
    state.setFlowTo = true;
    let ret = {
      [node.name]: `{() => setFlowTo('${flowPath}')}`
    };

    if (!parent.isBasic && ON_IS_SELECTED$1.test(node.name)) {
      state.useFlow = true;
      ret[node.name.replace(ON_IS_SELECTED$1, 'isSelected')] = `{flow.has('${flowPath}')}`;
    }

    if (parent.isBasic && ON_IS_SELECTED$1.test(node.name)) {
      state.useIsHovered = true;
      ret['...'] = `${node.name.replace(ON_IS_SELECTED$1, 'isHovered')}Bind`;
    }

    return ret;
  } else if (parent.isBasic && ON_IS_SELECTED$1.test(node.name)) {
    state.useIsHovered = true;
    return {
      '...': `${node.name.replace(ON_IS_SELECTED$1, 'isHovered')}Bind`,
      [node.name]: safe(node.value, node)
    };
  } else if (CHILD_VALUES$3.test(node.value) && !!getActionableParent(parent) && !parent.isBasic) {
    // TODO support more than one hover/selected in the same block - let's wait
    // for a use case
    if (/isHovered/.test(node.value)) {
      return {
        [node.name]: safe(node.value.replace('props.', ''), node)
      };
    } else if (/isSelected/.test(node.value)) {
      try {
        let actionableParent = getActionableParent(parent);
        let flowPath = getFlowPath(getProp(actionableParent, 'onClick'), actionableParent, state);
        state.use('ViewsUseFlow');
        state.useFlow = true;
        return {
          [node.name]: `{flow.has('${flowPath}')}`
        };
      } catch (error) {
        return {
          [node.name]: safe(node.value, node)
        };
      }
    } else {
      return {
        [node.name]: safe(node.value, node)
      };
    }
  } else {
    return {
      [node.name]: safe(node.value, node)
    };
  }
}

var maybeUsesStyleSheet = (state => {
  if (Object.keys(state.styles).length > 0) {
    state.uses.push('StyleSheet');
  }
});

let imports$1 = {
  DismissKeyboard: `import dismissKeyboard from 'dismissKeyboard'`
};
var reactNative = (({
  getFontImport,
  getSystemImport,
  reactNativeLibraryImport = 'react-native',
  tools,
  view,
  viewsById,
  viewsToFiles
}) => {
  let name = view.id;
  let finalName = restrictedNames.includes(name) ? `${name}1` : name;

  if (name !== finalName) {
    console.warn(`// "${name}" is a Views reserved name.
      We've renamed it to "${finalName}", so your view should work but this isn't ideal.
      To fix this, change its file name to something else.`);
  }

  let state = {
    animations: {},
    animated: new Set(),
    images: [],
    data: view.parsed.view.data,
    dataFormat: view.parsed.view.dataFormat,
    dataValidate: view.parsed.view.dataValidate,
    dependencies: new Set(),
    flow: null,
    setFlowTo: false,
    getFontImport: font => getFontImport(font, view),
    getStyleForProperty: getStyleForProperty$1,
    getValueForProperty: getValueForProperty$1,
    hasRefs: false,
    isReactNative: true,
    isStory: id => {
      let viewInView = getViewRelativeToView({
        id,
        view,
        viewsById,
        viewsToFiles
      });
      return viewInView && !viewInView.custom && viewInView.parsed.view.isStory;
    },
    lazy: {},
    name: finalName,
    viewPath: view.parsed.view.viewPath,
    viewPathParent: view.parsed.view.viewPathParent,
    remap: {},
    render: [],
    styles: {},
    testIdKey: 'testID',
    viewPathKey: 'testID',
    testIds: {},
    tools,
    reactNativeLibraryImport,
    usedBlockNames: {
      [finalName]: 1,
      AutoSizer: 1,
      Column: 1,
      Table: 1
    },
    uses: [],

    use(block, isLazy = false) {
      if (isLazy) {
        state.lazy[block] = true;
      }

      if (state.uses.includes(block) || /props/.test(block) || 'React.Fragment' === block || block === finalName) return;
      state.uses.push(block);
    },

    useIsBefore: view.parsed.view.useIsBefore,
    useIsMedia: view.parsed.view.useIsMedia
  };
  state.fonts = view.parsed.fonts;
  state.slots = view.parsed.slots;
  walk(view.parsed.view, visitor$1, state);
  maybeUsesStyleSheet(state);

  if (state.data) {
    state.use('ViewsUseData');
  }

  return {
    code: toComponent({
      getImport: makeGetImport({
        imports: imports$1,
        getSystemImport,
        view,
        viewsById,
        viewsToFiles
      }),
      getStyles: getStyles$1,
      name: finalName,
      state
    }),
    dependencies: state.dependencies,
    flow: state.flow,
    flowDefaultState: state.flowDefaultState // fonts: view.parsed.fonts,
    // slots: view.parsed.slots,

  };
});

var reactPdf = (options => reactNative({ ...options,
  reactNativeLibraryImport: '@react-pdf/renderer'
}));

var morphers = {
  'react-dom': reactDom,
  'react-native': reactNative,
  'react-pdf': reactPdf
};

function maybeMorph({
  as,
  getFontImport,
  getSystemImport,
  tools,
  view,
  viewsById,
  viewsToFiles,
  verbose
}) {
  let result = null;

  try {
    result = morphers[as]({
      getFontImport,
      getSystemImport,
      tools,
      view,
      viewsById,
      viewsToFiles
    });
    view.version++;
    verbose && console.log(`${chalk.green('M')} ${view.id}@${view.version}:${chalk.dim(view.file)}`);
    return result.code; // return prettier.format(result.code, {
    //   parser: 'babel',
    //   singleQuote: true,
    //   trailingComma: 'es5',
    // })
  } catch (error) {
    console.error(chalk.red('M'), view, error.codeFrame || error);
    return `import { useEffect } from 'react'

export default function ${view.id}() {
  useEffect(() => {
    console.error({
      type: 'morph',
      view: '${view.id}',
      file: '${view.file}',
      todo: "Report to https://github.com/viewstools/morph/issues/new with .view and .view.js files and what changed when it failed. This will help us improve the morpher. Thanks!",
    })
  }, [])

  return "😳 Can't morph '${view.id}'. See console for more details."
}

/*
>>> CODE
${result && result.code.replace(/(\/\*|\*\/)/g, '')}


>>> ERROR
${error.message}
${error.stack}
*/`;
  }
}

function morphAllViews({
  as,
  getFontImport,
  getSystemImport,
  filesView,
  tools,
  viewsById,
  viewsToFiles
}) {
  return [...filesView].map(file => viewsToFiles.get(file)).filter(view => !view.custom).map(view => ({
    file: path.join(path.dirname(view.file), 'view.js'),
    content: maybeMorph({
      as,
      getFontImport,
      getSystemImport,
      tools,
      verbose: false,
      view,
      viewsById,
      viewsToFiles
    })
  }));
}

function maybePrintWarnings(view, verbose) {
  if (!verbose || !view.parsed || view.parsed.warnings.length === 0) return;
  console.error(chalk.red(view.id), chalk.dim(view.file));
  view.parsed.warnings.forEach(warning => {
    console.error(`  ${chalk.yellow(warning.loc.start.line)}: ${chalk.blue(warning.type)} Line: "${warning.line}"`);
  });
  console.log('');
}

let STYLE = ['alignContent', 'alignItems', 'alignSelf', 'appRegion', 'background', 'backgroundColor', 'backgroundImage', 'backgroundPosition', 'backgroundRepeat', 'backgroundSize', 'backdropFilter', 'borderBottomColor', 'borderBottomLeftRadius', 'borderBottomRightRadius', 'borderBottomStyle', 'borderBottomWidth', 'borderColor', 'borderLeftColor', 'borderLeftStyle', 'borderLeftWidth', 'borderRightColor', 'borderRightStyle', 'borderRightWidth', 'borderStyle', 'borderTopColor', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderTopStyle', 'borderTopWidth', 'borderWidth', 'bottom', 'clipPath', 'color', 'cursor', 'display', 'direction', 'fill', 'filter', 'flexGrow', 'flexBasis', 'flexDirection', 'flexFlow', 'flexShrink', 'flexWrap', 'fontFamily', 'fontSize', 'fontStyle', 'fontWeight', 'height', 'hyphens', 'justifyContent', 'left', 'letterSpacing', 'lineHeight', 'marginBottom', 'marginLeft', 'marginRight', 'marginTop', 'maxHeight', 'maxWidth', 'minHeight', 'minWidth', 'opacity', 'outlineColor', 'outlineOffset', 'outlineStyle', 'outlineWidth', 'overflowWrap', 'overflowX', 'overflowY', 'paddingBottom', 'paddingLeft', 'paddingRight', 'paddingTop', 'pointerEvents', 'position', 'resize', 'right', 'shadowColor', 'shadowOffsetX', 'shadowOffsetY', 'shadowBlur', 'shadowSpread', 'shadowInset', 'stroke', 'textAlign', 'textDecoration', 'textOverflow', 'textJustify', 'textTransform', 'top', 'translateX', 'translateY', 'scale', 'scaleX', 'scaleY', 'rotate', 'rotateX', 'rotateY', 'transformOriginX', 'transformOriginY', 'transition', 'unicodeBidi', 'userSelect', 'whiteSpace', 'width', 'wordBreak', 'wordSpacing', 'wordWrap', 'zIndex', // '@fontFace',
// '@keyframes',
// '@media',
// 'background',
// 'backgroundAttachment',
// 'backgroundBlend-mode',
// 'backgroundClip',
// 'backgroundOrigin',
// 'backgroundPosition',
// 'backgroundRepeat',
// 'border',
// 'borderBottom',
// 'borderCollapse',
// 'borderImage',
// 'borderImageOutset',
// 'borderImageRepeat',
// 'borderImageSlice',
// 'borderImageSource',
// 'borderImageWidth',
// 'borderLeft',
// 'borderRadius',
// 'borderRight',
// 'borderSpacing',
// 'borderTop',
// 'boxShadow',
// 'boxSizing',
// 'captionSide',
// 'clear',
// 'clip',
// 'column-gap',
// 'columnCount',
// 'columnFill',
// 'columnRule',
// 'columnRuleColor',
// 'columnRuleStyle',
// 'columnRuleWidth',
// 'columnSpan',
// 'columnWidth',
// 'columns',
// 'content',
// 'counterIncrement',
// 'counterReset',
// 'direction',
// 'display',
// 'emptyCells',
// 'float',
// 'font',
// 'font-variant',
// 'fontSizeAdjust',
// 'fontStretch',
// 'hangingPunctuation',
// 'listStyle',
// 'listStyleImage',
// 'listStylePosition',
// 'listStyleType',
// 'margin',
// 'nav-up',
// 'navDown',
// 'navIndex',
// 'navLeft',
// 'navRight',
'order', // 'outline',
// 'overflow',
// 'padding',
// 'pageBreakAfter',
// 'pageBreakBefore',
// 'pageBreakInside',
'perspective', 'perspectiveOrigin', // 'quotes',
// 'tabSize',
// 'tableLayout',
// 'textAlignLast',
'textDecorationColor', 'textDecorationLine', 'textDecorationStyle', // 'textIndent',
// 'textShadow',
// 'transformStyle',
// 'transitionDelay',
// 'transitionDuration',
// 'transitionProperty',
// 'transitionTimingFunction',
// 'unicodeBidi',
// 'verticalAlign',
'visibility'];
let ROWSTYLE = ['rowBackgroundColor', 'rowBackgroundColorAlternate', 'rowColor', 'rowColorAlternate'];
let isStyle$1 = name => STYLE.includes(name);
let isRowStyle = name => ROWSTYLE.includes(name);

/**
 * Creates a fuzzy matcher.
 *
 * Usage:
 *
 * ```
 * var m = new Matcher({
 *   values: 'init install update upgrade',
 *   threshold: 4
 * });
 *
 * m.list('udpate')  // [ { value: 'update', distance: 2 }, { value: 'upgrade', distance: 4 } ]
 * m.get('udpate')   // { value: 'update', distance: 2 }
 * ```
 *
 * You can also initialize with an array or with a string directly:
 *
 * ```
 * new Matcher('init install update upgrade');
 * new Matcher(['init', 'install', 'update', 'upgrade']);
 * ```
 *
 * @param options {Object} may contain:
 *
 *   * `threshold` (number, default `2`) — maximum search distance, increase
 *     for more relaxed search
 *
 *   * `values` (array or string, default `[]`) — an array of words to match from;
 *     if a string is given, values can be separated with comma or whitespace
 *
 *   * `caseSensitive` (boolean, default `false`) — ignore case when matching
 */

var Matcher = function (options) {
  options = options || {};
  if (typeof options == 'string' || Array.isArray(options)) options = {
    values: options
  };
  this.values = [];
  this.threshold = options.threshold || 2; // Try to initialize via `options.values`

  if (Array.isArray(options.values)) this.values = options.values;else if (typeof options.values == 'string') this.values = options.values.split(/[, ]\s*/g);
  this.caseSensitive = options.caseSensitive || false;
};
/**
 * Adds values to the dictionary.
 *
 * Usage:
 *
 * ```
 * new Matcher().add('update', 'upgrade', 'delete').get('deete')
 * ```
 *
 * @returns {Matcher} this for chaining
 */


Matcher.prototype.add = function () {
  [].push.apply(this.values, arguments);
  return this;
};
/**
 * Chainable helper for settings `this.caseSensitive = false`.
 *
 * @returns {Matcher} this for chaining
 */


Matcher.prototype.ignoreCase = function () {
  this.caseSensitive = false;
  return this;
};
/**
 * Chainable helper for settings `this.caseSensitive = true`.
 *
 * @returns {Matcher} this for chaining
 */


Matcher.prototype.matchCase = function () {
  this.caseSensitive = true;
  return this;
};
/**
 * Chainable helper for settings `this.threshold`.
 *
 * @param num {Number} new threshold
 * @returns {Matcher} this for chaining
 */


Matcher.prototype.setThreshold = function (num) {
  this.threshold = num;
  return this;
};
/**
 * Calculate distance (how much difference) between two strings
 *
 * @param word1 {String} a string input
 * @param word2 {String} the other string input
 * @returns {Number} Levenshtein distance between word1 and word2
 */


Matcher.prototype.distance = function (word1, word2) {
  return new Levenshtein(word1, word2).distance;
};
/**
 * Lists all results from dictionary which are similar to `q`.
 *
 * ```
 * new Matcher({
 *   values: 'init install update upgrade',
 *   threshold: 4
 * }).list('udpdate');
 * // [ { value: 'update', distance: 2 }, { value: 'upgrade', distance: 4 } ]
 * ```
 *
 * The results are sorted by their distance (similarity). The distance of `0` means
 * a strict match.
 *
 * You can increase `threshold` for more relaxed search, or decrease it to shorten the results.
 *
 * @param q {String} — search string
 * @returns {Array} — an array of objects `{ value: String, distance: Number }`
 */


Matcher.prototype.list = function (q) {
  var m = this;
  q = q.trim();
  if (!m.caseSensitive) q = q.toLowerCase();
  var matches = this.values.reduce(function (results, word) {
    var d = m.distance(q, m.caseSensitive ? word : word.toLowerCase());
    if (d > m.threshold) return results;
    return results.concat({
      value: word,
      distance: d
    });
  }, []);
  return sortBy(matches, 'distance');
};
/**
 * Returns a single closest match (or `null` if no values from the dictionary
 * are similar to `q`).
 *
 * @param q {String} — search string
 * @returns {String} — closest match or `null`
 */


Matcher.prototype.get = function (q) {
  var closest = this.list(q)[0];
  return closest ? closest.value : null;
};

var isNumber = {
  width: true,
  maxWidth: true,
  minWidth: true,
  height: true,
  maxHeight: true,
  minHeight: true,
  margin: true,
  marginBottom: true,
  marginLeft: true,
  marginRight: true,
  marginTop: true,
  padding: true,
  paddingBottom: true,
  paddingLeft: true,
  paddingRight: true,
  paddingTop: true,
  bottom: true,
  left: true,
  right: true,
  top: true,
  outline: true,
  opacity: true,
  zIndex: true,
  shadowOffsetY: true,
  shadowOffsetX: true,
  shadowSpread: true,
  shadowRadius: true,
  perspective: true,
  scale: true,
  scaleX: true,
  scaleY: true,
  translateX: true,
  translateY: true,
  borderBottomLeftRadius: true,
  borderBottomRightRadius: true,
  borderBottomWidth: true,
  borderLeftWidth: true,
  borderRadius: true,
  borderRightWidth: true,
  borderTopLeftRadius: true,
  borderTopRightRadius: true,
  borderTopWidth: true,
  borderWidth: true,
  fontSize: true,
  fontWeight: true,
  letterSpacing: true,
  lineHeight: true,
  wordSpacing: true
};

let dymPropMatcher = new Matcher([...STYLE, 'at', 'className', 'cx', 'cy', 'd', 'data', 'xdata', 'dataFormat', 'defaultValue', 'fill', 'from', 'direction', 'id', 'is', 'key', 'maxLength', 'max', 'min', 'onBlur', 'onChange', 'onClick', 'onClickUseDiv', 'onDrag', 'onDragEnd', 'onDragEnter', 'onDragExit', 'onDragLeave', 'onDragOver', 'onDragStart', 'onDrop', 'onFocus', 'onFocus', 'onMouseDown', 'onMouseEnter', 'onMouseLeave', 'onMouseMove', 'onMouseOver', 'onMouseUp', 'onWheel', 'onWhen', 'order', 'r', 'ref', 'rx', 'ry', 'step', 'stroke', 'stroke', 'strokeLinecap', 'strokeLinejoin', 'strokeMiterlimit', 'strokeWidth', 'tabIndex', 'text', 'type', 'value', 'viewBox', 'when', 'x', 'x1', 'x2', 'y', 'y1', 'y2']);
let makeDidYouMeanBlock = views => {
  let dymBlockMatcher = new Matcher('Block|Capture|CaptureTextArea|Children|Horizontal|Image|List|Svg|SvgCircle|SvgEllipse|SvgDefs|SvgGroup|SvgLinearGradient|SvgRadialGradient|SvgLine|SvgPath|SvgPolygon|SvgPolyline|SvgRect|SvgSymbol|SvgText|SvgUse|SvgStop|Text|View|Vertical'.split('|').concat(views));
  return block => dymBlockMatcher.get(block);
};
let didYouMeanProp = prop => dymPropMatcher.get(prop);
let makeDidYouMeanFontFamily = customFonts => {
  let dymFontFamilyMatcher = new Matcher(fontFamily.concat(customFonts));
  return family => dymFontFamilyMatcher.get(family);
};
let ANIMATION = /(.+)(?:\s)(spring|linear|easeOut|easeInOut|easeIn|ease)(?:\s?(.*)?)/;
let BASIC = /^(Block|Capture|CaptureTextArea|Children|Column|Horizontal|Image|List|Svg|SvgCircle|SvgEllipse|SvgDefs|SvgGroup|SvgLinearGradient|SvgRadialGradient|SvgLine|SvgPath|SvgPolygon|SvgPolyline|SvgRect|SvgSymbol|SvgText|SvgUse|SvgStop|Table|Text|View|Vertical)$/i;
let BLOCK = /^(\s*)([A-Z][a-zA-Z0-9]*)(\s+([A-Z][a-zA-Z0-9]*))?$/;
let BOOL = /^(false|true)$/i;
let CAPTURE = /^(Capture|CaptureTextArea)$/i;
let CAPTURE_TYPES = ['email', 'file', 'number', 'phone', 'secure', 'text'];
let COMMENT = /^#(.+)$/;
let FLOAT = /^-?[0-9]+\.[0-9]+$/;
let FONTABLE = /^(Capture|CaptureTextArea|Text)$/;
let INT = /^-?[0-9]+$/;
let NOT_GROUP = /^(Image|Text|SvgCircle|SvgEllipse|SvgLine|SvgPath|SvgPolygon|SvgPolyline|SvgRect|SvgText|SvgStop)$/i;
let PROP = /^([a-z][a-zA-Z0-9]*)(\s+(.+))?$/;
let UNSUPPORTED_SHORTHAND = {
  border: ['borderWidth', 'borderStyle', 'borderColor'],
  borderBottom: ['borderBottomWidth', 'borderBottomStyle', 'borderBottomColor'],
  borderTop: ['borderTopWidth', 'borderTopStyle', 'borderTopColor'],
  borderRight: ['borderRightWidth', 'borderRightStyle', 'borderRightColor'],
  borderLeft: ['borderLeftWidth', 'borderLeftStyle', 'borderLeftColor'],
  borderRadius: ['borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius'],
  boxShadow: ['shadowOffsetX', 'shadowOffsetY', 'shadowBlur', 'shadowSpread', 'shadowColor'],
  flex: ['flexGrow', 'flexShrink', 'flexBasis'],
  margin: ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'],
  padding: ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'],
  textShadow: ['shadowOffsetX', 'shadowOffsetY', 'shadowBlur', 'shadowColor'],
  outline: ['outlineWidth', 'outlineStyle', 'outlineColor'],
  overflow: ['overflowX', 'overflowY'],
  transform: ['rotate', 'rotateX', 'rotateY', 'scale', 'translateX', 'translateY'],
  transformOrigin: ['transformOriginX', 'transformOriginY']
};
let TRUE = /^true$/i;
let USER_COMMENT = /^##(.*)$/; // TODO slot can't start with a number

let SLOT = /^<((!)?([a-zA-Z0-9]+))?(\s+(.+))?$/;
let is = (thing, line) => thing.test(line);
let isAnimation = line => is(ANIMATION, line);
let isBasic = line => is(BASIC, line);
let isBlock = line => is(BLOCK, line);
let isBool = line => is(BOOL, line);
let isCapture = line => is(CAPTURE, line);
let isColumn$1 = line => line === 'Column';
let isComment = line => is(COMMENT, line);
let isEmptyText = line => line === '';
let isFloat = line => is(FLOAT, line);
let isFragment = line => line === 'isFragment';
let isFontable = line => is(FONTABLE, line);
let isGroup = line => !is(NOT_GROUP, line) && !isCapture(line);
let isList$1 = line => line === 'List';
let isInt = line => is(INT, line);
let isProp = line => is(PROP, line);
let isTable$1 = line => line === 'Table';
let isUnsupportedShorthand = name => name in UNSUPPORTED_SHORTHAND;
let isTrue = line => is(TRUE, line);
let isUserComment = line => is(USER_COMMENT, line);

let get = (regex, line) => line.match(regex);

let addDefaults = (animationType, properties) => {
  // if (!properties.delay) {
  //   properties.delay = 0
  // }
  if (animationType !== 'spring' && !properties.duration) {
    properties.duration = 150;
  } else if (animationType === 'spring') {
    if (!properties.tension) {
      properties.tension = 170;
    }

    if (!properties.friction) {
      properties.friction = 26;
    }
  }

  return properties;
};

let getAnimation = line => {
  // eslint-disable-next-line
  let [_, defaultValue, animationType, animationValues] = get(ANIMATION, line);
  let properties = {
    curve: animationType
  };

  if (animationValues) {
    let values = animationValues.split(' ');

    for (let i = 0; i < values.length; i = i + 2) {
      properties[values[i]] = getValue(values[i + 1]);
    }
  }

  addDefaults(animationType, properties);
  return {
    id: Object.keys(properties).sort().map(key => `${key}${properties[key]}`).join(''),
    defaultValue: getValue(defaultValue),
    properties
  };
};
let getBlock = line => {
  // eslint-disable-next-line
  let [_, indentation, is, _1, block] = get(BLOCK, line);
  return {
    block: block || is,
    is: block ? is : null,
    level: Math.floor(indentation.length / 2)
  };
};
let getComment = line => {
  try {
    return get(COMMENT, line).slice(1);
  } catch (err) {
    return '';
  }
};
let getData = maybeProp => {
  if (!maybeProp) return null;
  let match = maybeProp.value.match(/^(show|capture)\s+(.+)$/);
  if (!match) return null;
  let path = match[2];
  let [context = null] = /\./.test(path) ? path.split('.') : [path];
  return {
    type: match[1],
    path,
    context
  };
};
let getDataFormat = maybeProp => {
  if (!maybeProp || !maybeProp.value) return null;
  let [formatIn, formatOut] = maybeProp.value.split(' ');
  return {
    type: 'js',
    formatIn,
    formatOut
  };
};
let getDataValidate = maybeProp => {
  if (!maybeProp || !maybeProp.value) return null;
  let [value, required] = maybeProp.value.split(' ');
  return {
    type: 'js',
    value,
    required: required === 'required'
  };
};
let getFormat = line => {
  let properties = {};
  let values = line.split(' ');
  let formatKey = values[0];

  if (values.length === 2) {
    properties[formatKey] = values[1];
  } else {
    properties[formatKey] = {};

    for (let i = 1; i < values.length; i = i + 2) {
      properties[formatKey][values[i]] = getValue(values[i + 1]);
    }
  }

  return properties;
};
let getProp$1 = line => {
  // eslint-disable-next-line
  let [_, name, _1, value = ''] = get(PROP, line);
  let prop = {
    name,
    isSlot: false,
    value
  };

  if (is(SLOT, value)) {
    let [// eslint-disable-next-line
    _2, slotIsNot = false, slotName = '', // eslint-disable-next-line
    _3, // eslint-disable-next-line
    defaultValue = ''] = getSlot(value);
    prop.isSlot = true;
    prop.slotIsNot = slotIsNot === '!';
    prop.slotName = slotName;
    prop.value = defaultValue || value;
  }

  return prop;
};
let getSlot = line => get(SLOT, line).slice(1);
let getUnsupportedShorthandExpanded = (name, value) => {
  let props = UNSUPPORTED_SHORTHAND[name];

  if (name === 'borderRadius') {
    let theValue = value.replace('px', '');
    return [`${props[0]} ${theValue}`, `${props[1]} ${theValue}`, `${props[2]} ${theValue}`, `${props[3]} ${theValue}`];
  } else if (name.startsWith('border') || name === 'outline') {
    let [width, style, ...color] = value.split(' ');
    return [`${props[0]} ${width.replace('px', '')}`, `${props[1]} ${style}`, `${props[2]} ${color.join(' ')}`];
  } else if (name === 'boxShadow') {
    let [offsetX, offsetY, blurRadius, spreadRadius, ...color] = value.split(' ');
    return [`${props[0]} ${offsetX.replace('px', '')}`, `${props[1]} ${offsetY.replace('px', '')}`, `${props[2]} ${blurRadius.replace('px', '')}`, `${props[3]} ${spreadRadius.replace('px', '')}`, `${props[4]} ${color.join(' ')}`];
  } else if (name === 'textShadow') {
    let [offsetX, offsetY, blurRadius, ...color] = value.split(' ');
    return [`${props[0]} ${offsetX.replace('px', '')}`, `${props[1]} ${offsetY.replace('px', '')}`, `${props[2]} ${blurRadius.replace('px', '')}`, `${props[3]} ${color.join(' ')}`];
  } else if (name === 'overflow') {
    return [`${props[0]} ${value}`, `${props[1]} ${value}`];
  } else if (name === 'padding' || name === 'margin') {
    let [top, right, bottom, left] = value.split(' ');
    top = top.replace('px', '');
    right = right ? right.replace('px', '') : top;
    bottom = bottom ? bottom.replace('px', '') : top;
    left = left ? left.replace('px', '') : right || top;
    return [`${props[0]} ${top}`, `${props[1]} ${right}`, `${props[2]} ${bottom}`, `${props[3]} ${left}`];
  } else if (name === 'flex') {
    return [`flexGrow ${value}`, 'flexShrink 1', 'flexBasis 0%'];
  } else if (name === 'transform') {
    return [`expand the values like: translateX 10`];
  } else if (name === 'transformOrigin') {
    let [x, y] = value.split(' ');
    return [`${props[0]} ${x}`, `${props[1]} ${y || x}`];
  }

  return [];
};
let getValue = (value, name) => {
  if (isFloat(value)) {
    return parseFloat(value, 10);
  } else if (isInt(value)) {
    return parseInt(value, 10);
  } else if (isEmptyText(value)) {
    return '';
  } else if (isBool(value)) {
    return isTrue(value);
  } else {
    return maybeMakeHyphenated$1(value, name);
  }
};
let SYSTEM_SCOPES = ['isDisabled', 'isFocused', // 'isHovered',
'isPlaceholder' // 'isSelected',
// TODO do we want to do media queries here?
];
let isSystemScope = name => SYSTEM_SCOPES.includes(name);

let isActionable = name => name !== 'onWhen' && /^on[A-Z]/.test(name);

let getPropType = (block, name, defaultValue) => block.isList && name === 'from' ? 'array' : isActionable(name) ? 'function' : isNumber[name] ? 'number' : 'string';
let MAYBE_HYPHENATED_STYLE_PROPS$1 = ['alignContent', 'alignItems', 'alignSelf', 'backgroundBlendMode', 'backgroundClip', 'backgroudOrigin', 'backgroundRepeat', 'boxSizing', 'clear', 'cursor', 'flexBasis', 'flexDirection', 'flexFlow', 'flexWrap', 'float', 'fontStretch', 'justifyContent', 'objectFit', 'overflowWrap', 'textAlign', 'textDecorationLine', 'textTransform', 'whiteSpace', 'wordBreak'];
let maybeMakeHyphenated$1 = (value, name) => MAYBE_HYPHENATED_STYLE_PROPS$1.includes(name) && /^[a-zA-Z]+$/.test(value) ? toSlugCase(value) : value;
function sortScopes(scopes) {
  let isHovered = scopes.find(item => item.slotName === 'isHovered');
  let isSelected = scopes.find(item => item.slotName === 'isSelected');
  let isSelectedHovered = scopes.find(item => item.slotName === 'isSelectedHovered');
  return [isSelectedHovered, isSelected, isHovered, ...scopes.filter(item => !/^(isHovered|isSelected|isSelectedHovered)$/.test(item.slotName))].filter(Boolean);
}

var getLoc = ((line, scolumn, ecolumn) => ({
  start: {
    line,
    column: scolumn
  },
  end: {
    line,
    column: ecolumn
  }
}));

let SLOT_PROPS = ['onBlur', 'onChange', 'onClick', 'onDrag', 'onDragEnd', 'onDragEnter', 'onDragExit', 'onDragLeave', 'onDragOver', 'onDragStart', 'onDrop', 'onFocus', 'onFocus', 'onMouseDown', 'onMouseEnter', 'onMouseLeave', 'onMouseMove', 'onMouseOver', 'onMouseUp', 'onWheel', 'onWhen', 'when'];

let shouldBeSlot = (prop, block) => SLOT_PROPS.includes(prop) || block.isList && prop === 'from';

var getTags = (({
  name,
  isSlot,
  slotIsNot,
  value,
  block
}) => {
  let tags = {};
  if (isAnimation(value) && name !== 'text') tags.animation = true;
  if (isStyle$1(name)) tags.style = true;

  if (isRowStyle(name)) {
    tags.style = true;
    tags.rowStyle = true;
  }

  if (isUnsupportedShorthand(name) && block.isBasic && !block.name.startsWith('Svg')) {
    tags.unsupportedShorthand = true;
  }

  if (shouldBeSlot(name, block)) tags.shouldBeSlot = true;
  if (isSlot) tags.slot = true;
  if (slotIsNot) tags.slotIsNot = true;
  tags.validSlot = tags.slot || tags.shouldBeSlot && tags.slot || null;
  if (isFragment(name)) tags.fragment = true;
  return tags;
});

var parse = (({
  convertSlotToProps = true,
  customFonts,
  enableSystemScopes = true,
  file,
  id,
  skipComments = true,
  skipInvalidProps = true,
  warnMissingDefaultValue = false,
  source,
  src,
  views
}) => {
  // convert crlf to lf
  let text = source.replace(/\r\n/g, '\n');
  let rlines = text.split('\n');
  let lines = rlines.map(line => line.trimRight());
  let fonts = [];
  let isDefiningChildrenExplicitly = false;
  let stack = [];
  let slots = [];
  let useIsBefore = false;
  let useIsMedia = false;
  let topBlockShouldBe = file.endsWith('.view') ? 'View' : 'Block';
  let view = null;
  let viewsInView = new Set();
  let warnings = [];
  let didYouMeanBlock = makeDidYouMeanBlock([...views.keys()]);
  let didYouMeanFontFamily = makeDidYouMeanFontFamily([...customFonts.keys()].map(id => id.split('-')[0]));
  let blockIds = [];

  function getBlockId(node) {
    let maybeId = node.is || node.name;

    if (!blockIds.includes(maybeId)) {
      blockIds.push(maybeId);
      return maybeId;
    }

    let index = 1;

    while (blockIds.includes(`${maybeId}${index}`)) {
      index++;
    }

    let id = `${maybeId}${index}`;
    blockIds.push(id);
    return id;
  }

  function lookForFonts(block) {
    if (block.properties && (isFontable(block.name) || !block.isBasic)) {
      let fontFamilyProp = block.properties.find(p => p.name === 'fontFamily');
      if (!fontFamilyProp) return;
      let family = fontFamilyProp.value;
      let fontWeightProp = block.properties.find(p => p.name === 'fontWeight');
      let weight = fontWeightProp ? fontWeightProp.value.toString() : '400';
      let fontStyleProp = block.properties.find(p => p.name === 'fontStyle');
      let style = fontStyleProp ? fontStyleProp.value.toString() : 'normal';

      if (!fonts.find(font => font.family === family && font.weight === weight && font.style === style)) {
        let font = {
          id: `${family}-${weight}${style === 'italic' ? '-italic' : ''}`,
          isGoogleFont: isGoogleFont(family),
          family,
          weight,
          style
        };

        if (font.isGoogleFont || customFonts.has(font.id)) {
          fonts.push(font);
        } else {
          let meant = didYouMeanFontFamily(family);

          if (meant && meant !== family) {
            warnings.push({
              loc: fontFamilyProp.loc,
              type: `The font "${family}" is missing. Did you mean "${meant}" instead?\nIf not, download the font files (eg, "${font.id}.woff2", "${font.id}.woff", "${font.id}.ttf", etc) and add the to the "Fonts" folder.`,
              line: lines[fontFamilyProp.loc.start.line - 1]
            });
          } else if (!font.weight.startsWith('props.')) {
            warnings.push({
              loc: fontFamilyProp.loc,
              type: `The font "${family}" is missing.\nDownload the font files (eg, "${font.id}.woff2", "${font.id}.woff", "${font.id}.ttf", etc) and add the to the "Fonts" folder.`,
              line: lines[fontFamilyProp.loc.start.line - 1]
            });
          }
        }
      }
    }
  }

  function lookForMultiples(block) {
    let freq = {};
    block.properties.forEach(prop => {
      if (!(prop.name in freq)) {
        freq[prop.name] = 0;
      }

      freq[prop.name]++;
    });
    let multiples = Object.keys(freq).filter(name => freq[name] > 1);

    if (multiples.length > 0) {
      multiples.forEach(name => warnings.push({
        loc: block.loc,
        type: `You have declared a value for ${name} ${freq[name]} times. Only the last value will be used. Delete the ones you don't use.`,
        line: lines[block.loc.start.line - 1]
      }));
    }
  }

  function end(block, endLine) {
    block.loc.end = {
      line: endLine + 1,
      column: Math.max(0, lines[endLine].length - 1)
    };

    if (!block.properties) {
      block.properties = [];
    }

    if (block.name === 'List' && !block.properties.some(prop => prop.name === 'from')) {
      warnings.push({
        loc: block.loc,
        type: `A List needs "from <" to work`,
        line: lines[block.loc.start.line - 1]
      });
    }

    if (stack.length === 0) {
      // if we're the last block on the stack, then this is the view!
      view = block;
      return true;
    }

    return false;
  }

  function parseBlock(line, i) {
    let {
      block: name,
      is,
      level
    } = getBlock(line);
    let shouldPushToStack = false;
    let isChildren = name === 'Children';

    if (isChildren) {
      isDefiningChildrenExplicitly = true;
    }

    let block = {
      type: 'Block',
      name,
      animations: {},
      isAnimated: false,
      isBasic: isBasic(name),
      isCapture: isCapture(name),
      isColumn: isColumn$1(name),
      isGroup: false,
      isChildren,
      level,
      loc: getLoc(i + 1, 0),
      properties: [],
      scopes: []
    };
    let meant = didYouMeanBlock(name);

    if (meant) {
      if (meant !== name) {
        warnings.push({
          loc: block.loc,
          type: `"${name}" doesn't exist and won't be morphed. Did you mean "${meant}" instead of "${name}"?`,
          line
        });
        block.skip = true;
      }
    } else {
      warnings.push({
        loc: block.loc,
        type: `"${name}" doesn't exist and won't be morphed.\nCreate the view or rename the block to point to the right view.`,
        line
      });
      block.skip = true;
    }

    if (id === name) {
      warnings.push({
        loc: block.loc,
        type: `Is this a typo? You can't use the view within itself.\nRename the view or use a different block instead of ${name} here. This won't be morphed to avoid loops.`,
        line
      });
      block.skip = true;
    }

    if (!block.isBasic) {
      viewsInView.add(block.name);
    }

    if (is) {
      block.is = is;
    }

    block.id = getBlockId(block);
    let last = stack[stack.length - 1];

    while (last && last.level >= block.level) {
      end(stack.pop(), i);
      last = stack[stack.length - 1];
    }

    if (last) {
      shouldPushToStack = true;

      if (last.isGroup) {
        if (last.isList) {
          if (block.isBasic) {
            warnings.push({
              loc: block.loc,
              type: `A basic block "${block.name}" can't be inside a List. Use a view you made instead.`,
              line,
              blocker: true
            });
          } else if (last.children.length > 0) {
            warnings.push({
              loc: block.loc,
              type: `A List can only have one view inside. "${block.name}" is outside of it. Put 1 empty line before.`,
              line
            });
          } else {
            last.children.push(block);
          }
        } else if (block.isColumn && !last.isTable) {
          warnings.push({
            loc: block.loc,
            type: `Only tables can contain columns. Put this column directly inside a table.`,
            line
          });
        } else {
          last.children.push(block);
        }
      } else {
        end(stack.pop(), i); // inside a block that isn't a group

        if (last.isBasic) {
          warnings.push({
            loc: block.loc,
            type: `${block.is || block.name} is inside a block ${last.is || last.name} but ${last.name} isn't a container and can't have blocks inside of it.\nIndent it one level less.`,
            line
          });
        } else {
          warnings.push({
            loc: block.loc,
            type: `${block.is || block.name} is inside a view. While that's allowed for now, it may break in the future. Ideally, you'd refactor it into its specific own view.`,
            line
          });
        }
      }
    } else if (view !== null) {
      warnings.push({
        loc: block.loc,
        type: `${block.is || block.name} is outside of the top block and it won't render. Views relies on indentation to nest child views within ${topBlockShouldBe} blocks\nTo fix it, either:\na) Indent ${block.is || block.name} within the top block and indent all nested views within ${block.is || block.name}, or\nb) remove it.`,
        line
      });
    }

    if (isGroup(name)) {
      block.isGroup = true;
      block.isList = isList$1(name);
      block.isTable = isTable$1(name);
      block.children = [];
    }

    if (block.isBasic && (block.name === 'View' || block.name === 'Block')) {
      block.isFragment = true;

      if (stack.length > 0) {
        warnings.push({
          type: `A view can only have one ${block.name} block. Maybe you want to split this block into another view?`,
          line,
          loc: block.loc
        });
      }
    } else if (stack.length === 0) {
      warnings.push({
        type: `A view must start with a ${topBlockShouldBe} block. ${block.name} isn't valid.\nWrap everything within a ${topBlockShouldBe} block at the top.`,
        line,
        loc: block.loc
      });
    }

    if (shouldPushToStack || stack.length === 0) {
      stack.push(block);
    }

    parseProps(i, block);
    lookForFonts(block);
    lookForMultiples(block);
  }

  function parseProps(i, block) {
    let endOfBlockIndex = i;

    while (endOfBlockIndex < lines.length - 1 && !isBlock(lines[endOfBlockIndex + 1])) {
      endOfBlockIndex++;
    }

    let properties = [];
    let scopes = [];
    let scope;
    let inScope = false;

    for (let j = i; j <= endOfBlockIndex; j++) {
      let line = lines[j].trim();
      let propNode = null;

      if (isProp(line)) {
        let {
          name,
          isSlot,
          slotName,
          slotIsNot,
          value
        } = getProp$1(line);
        let loc = getLoc(j + 1, line.indexOf(name), line.length - 1);
        let tags = getTags({
          name,
          isSlot,
          slotIsNot,
          value,
          block
        });

        if (block.isBasic) {
          if (tags.unsupportedShorthand) {
            warnings.push({
              loc,
              type: `The shorthand ${name} isn't supported. You need to expand it like:\n${getUnsupportedShorthandExpanded(name, value).join('\n')}`,
              line
            });
          } else {
            let meant = didYouMeanProp(name);

            if (meant && meant !== name) {
              warnings.push({
                loc,
                type: `Did you mean "${meant}" instead of "${name}"?`,
                line
              });
            }
          }

          if (tags.fragment && block.isGroup) {
            if (isSlot) {
              warnings.push({
                loc,
                type: `The isFragment prop can't be a slot. You need to change it to isFragment true. Treating it as true for now.`,
                line
              });
            }

            block.isFragment = true;
          }

          if (block.type === 'Capture' && !CAPTURE_TYPES.includes(value)) {
            if (/textarea/i.test(value)) {
              warnings.push({
                loc,
                type: `Invalid type ${value} for Capture. Perhaps you want to use a CaptureTextArea block instead? Using type text as a default.`,
                line
              });
            } else {
              warnings.push({
                loc,
                type: `Invalid type ${value} for Capture. You can use ${CAPTURE_TYPES.join(', ')}. Using type text as a default.`,
                line
              });
            }

            value = 'text';
          }
        } else {
          if (name === 'lazy') {
            block.isLazy = true;
          }
        }

        if (name === 'when') {
          let isSystem = enableSystemScopes && isSystemScope(slotName);

          if (value === '' || value === '<' || value === '<!') {
            warnings.push({
              loc,
              type: 'This when has no condition assigned to it. Add one like: "when <isCondition"',
              line
            });
            if (skipInvalidProps) continue;
          } else if (!tags.validSlot) {
            warnings.push({
              loc,
              type: `The slot name "${name}" isn't valid. Fix it like: "when <isCondition" `,
              line
            });
            if (skipInvalidProps) continue;
          }

          if (isSystem && slotIsNot) {
            warnings.push({
              loc,
              type: `"${slotName}" is a system slot and it can't take a "!" in its value. Replace the line for: "when <${slotName}".`
            });
          }

          tags.scope = value;
          inScope = true;
          scope = {
            isSystem,
            defaultValue: getValue(value, name),
            value,
            name,
            slotName,
            slotIsNot: isSystem ? false : slotIsNot,
            properties: []
          };

          if (convertSlotToProps) {
            scope.value = slotName;

            if (slotName === 'isBefore') {
              useIsBefore = true;
            } else if (/!?isMedia.+/.test(slotName)) {
              scope.value = `isMedia.${slotName.replace('isMedia', '').toLowerCase()}`;
              useIsMedia = true;
            } else if (!isSystem) {
              scope.value = `${slotIsNot ? '!' : ''}props.${slotName || name}`;
            }
          }

          scopes.push(scope);
        } else if ((tags.slot || tags.shouldBeSlot) && !tags.validSlot) {
          if (name === 'from' && block.name === 'List' || name !== 'from') {
            warnings.push({
              loc,
              type: `The value you used in the slot "${name}" is invalid`,
              line
            });
            if (skipInvalidProps) continue;
          }
        }

        if (name === 'onWhen' && properties.length > 0) {
          warnings.push({
            type: `Put onWhen at the top of the block. It's easier to see it that way!`,
            line,
            loc
          });
        }

        if (name === 'onWhen' && /!?isMedia.+/.test(slotName)) {
          useIsMedia = true;
        }

        if (name === 'format') {
          block.format = getFormat(value);
        }

        if (value === '' && name !== 'text') {
          warnings.push({
            loc,
            type: `"${name}" has no value. Please give it a value.`,
            line
          });
          if (skipInvalidProps) continue;
        }

        propNode = {
          type: 'Property',
          loc,
          name,
          tags,
          value: getValue(value, name)
        };

        if (tags.animation && scope) {
          block.isAnimated = true;
          let currentAnimation = getAnimation(value);
          propNode.value = currentAnimation.defaultValue;
          propNode.animation = currentAnimation.properties;

          if (propNode.animation.curve === 'spring') {
            block.hasSpringAnimation = true;
          } else {
            block.hasTimingAnimation = true;
          }

          if (!block.animations[currentAnimation.id]) {
            block.animations[currentAnimation.id] = {
              index: Object.keys(block.animations).length,
              animation: currentAnimation,
              props: {}
            };
          }

          propNode.animationIndexOnBlock = block.animations[currentAnimation.id].index;

          if (!block.animations[currentAnimation.id].props[name]) {
            let baseValue = null;
            let baseProp = properties.find(prop => prop.name === name);

            if (baseProp) {
              baseValue = baseProp.value;
            }

            block.animations[currentAnimation.id].props[name] = {
              name,
              scopes: [],
              value: baseValue
            };
          }

          block.animations[currentAnimation.id].props[name].scopes.push({
            name: scope.slotName,
            value: currentAnimation.defaultValue
          });
        }

        if (scope) {
          propNode.scope = scope.slotName;
        }

        if (tags.slot) {
          let needsDefaultValue = !tags.shouldBeSlot && /</.test(propNode.value);

          if (typeof propNode.value === 'string') {
            propNode.value = propNode.value.replace(/^</, '');
          }

          propNode.slotName = slotName;

          if (name !== 'when' || name === 'when' && !scope.isSystem) {
            propNode.defaultValue = propNode.value;

            if (convertSlotToProps) {
              propNode.value = `${slotIsNot ? '!' : ''}props.${slotName || name}`;
            }

            if (needsDefaultValue) {
              if (name === 'text' && block.name === 'Text') {
                propNode.defaultValue = '';
              } else {
                propNode.defaultValue = false;

                if (warnMissingDefaultValue && block.isBasic && (propNode.tags.style || block.name === 'Text' && propNode.name === 'text')) {
                  warnings.push({
                    loc,
                    type: `Add a default value to "${name}" like: "${name} <${slotName} default value"`,
                    line
                  });
                }
              }
            }

            if (!inScope && !propNode.tags.fragment && !slots.some(vp => vp.name === (slotName || name))) {
              slots.push({
                name: slotName || name,
                type: getPropType(block, name),
                defaultValue: tags.shouldBeSlot ? false : propNode.defaultValue
              });
            }
          }
        }
      } else if (isComment(line) && !skipComments) {
        let [value] = getComment(line);
        let userComment = isUserComment(line);

        if (userComment) {
          value = getComment(value);
        }

        propNode = {
          type: 'Property',
          loc: getLoc(j + 1, 0, line.length - 1),
          value,
          tags: {
            comment: true,
            userComment
          }
        };
      }

      if (propNode) {
        block.loc.end = propNode.loc.end;

        if (inScope) {
          if (propNode.name !== 'when' && !propNode.tags.comment && !properties.some(baseProp => baseProp.name === propNode.name)) {
            warnings.push({
              loc: propNode.loc,
              type: `You're missing a base prop for ${propNode.name}. Add it before all whens on the block.`,
              line
            });
          }

          scope.properties.push(propNode);
        } else {
          properties.push(propNode);
        }
      }
    }

    block.properties = properties;
    block.scopes = sortScopes(scopes);

    if (block.name !== 'View' && block.isFragment) {
      let invalidProps = properties.filter(prop => prop.name !== 'isFragment' || prop.name !== 'onWhen').map(prop => prop.name);

      if (invalidProps.length > 0) {
        warnings.push({
          type: `A fragment can only have isFragment and onWhen props.\nEvery other prop will be dismissed.\nEither remove ${invalidProps.join(', ')} or remove isFragment.`,
          loc: block.loc,
          line: rlines[i]
        });
      }
    }
  }

  lines.forEach((line, i) => {
    if (line !== rlines[i].trimRight()) {
      warnings.push({
        type: `You have some spaces before or after this line. Clean them up.`,
        loc: {
          start: {
            line: i + 1
          }
        },
        line: rlines[i]
      });
    }

    if (isBlock(line)) {
      parseBlock(line, i);
    }
  });

  if (stack.length > 0) {
    while (!end(stack.pop(), lines.length - 1)) {}
  }

  if (!view) {
    view = {
      type: 'Block',
      name: id,
      animations: {},
      isAnimated: false,
      isBasic: true,
      isCapture: false,
      isColumn: false,
      isGroup: false,
      isChildren: false,
      level: 0,
      loc: getLoc(1, 0),
      properties: [],
      scopes: []
    };
    warnings.push({
      loc: view.loc,
      type: `The file for ${id} is empty and won't render! Add some blocks to it like:\n${topBlockShouldBe}\n  Text\n    text content`,
      line: ''
    });
  }

  let flowProp = view.properties.find(p => p.name === 'is');

  if (flowProp) {
    view.isStory = true;
    view.flow = flowProp.value;
    view.viewPath = path.dirname(file.replace(src.replace(/\\/g, '/'), ''));
    view.viewPathParent = path.dirname(view.viewPath);
    view.data = getData(view.properties.find(p => p.name === 'data'));
    view.dataFormat = getDataFormat(view.properties.find(p => p.name === 'dataFormat'));
    view.dataValidate = getDataValidate(view.properties.find(p => p.name === 'dataValidate'));
  } else {
    view.isStory = false;
  }

  view.isDefiningChildrenExplicitly = isDefiningChildrenExplicitly;
  view.useIsBefore = useIsBefore;
  view.useIsMedia = useIsMedia;
  view.views = viewsInView;
  return {
    fonts,
    slots,
    view,
    warnings
  };
});

let getFileDepth = file => file.split(path.sep).length - 1;

let sortByFileDepth = (a, b) => {
  let depthA = getFileDepth(a);
  let depthB = getFileDepth(b);
  let depthDelta = depthA - depthB;
  if (depthDelta !== 0) return depthDelta;
  return a < b ? 1 : a > b ? -1 : 0;
};

function sortSetsInMap(map) {
  for (let [key, value] of map) {
    if (value.size <= 1) continue;
    map.set(key, new Set([...value].sort(sortByFileDepth)));
  }
}

function parseViews({
  customFonts,
  filesView,
  src,
  verbose,
  viewsById,
  viewsToFiles
}) {
  for (let file of filesView) {
    let view = viewsToFiles.get(file);
    if (view.custom) continue;
    view.parsed = parse({
      customFonts,
      file,
      id: view.id,
      src,
      source: view.source,
      views: viewsById
    });
    maybePrintWarnings(view, verbose);
  }

  sortSetsInMap(viewsById);
}

let EXTENSIONS = ['view.blocks', 'logic.js', 'react.js'];
function getViewIdFromFile(file) {
  let extension = EXTENSIONS.find(item => file.endsWith(item));

  if (!extension) {
    throw new Error(`Can't recognise the extension of "${file}" to get a view's id.`);
  }

  return path.basename(path.dirname(file));
}

function processViewCustomFiles({
  filesViewCustom,
  viewsById,
  viewsToFiles
}) {
  [...filesViewCustom].forEach(file => {
    let id = getViewIdFromFile(file);
    addToMapSet(viewsById, id, file);
    viewsToFiles.set(file, {
      custom: true,
      file,
      id,
      logic: false,
      source: null,
      version: 0
    });
  });
}

async function processViewFiles({
  filesView,
  filesViewLogic,
  viewsById,
  viewsToFiles
}) {
  await Promise.all([...filesView].map(async file => {
    let id = getViewIdFromFile(file);
    addToMapSet(viewsById, id, file);
    let view = viewsToFiles.has(file) ? viewsToFiles.get(file) : {};
    let logic = path.join(path.dirname(file), 'logic.js');
    viewsToFiles.set(file, { ...view,
      custom: false,
      file,
      id,
      logic: filesViewLogic.has(logic) && logic,
      source: await fs.promises.readFile(file, 'utf8'),
      version: view.version ? view.version + 1 : 0
    });
  }));
}

function makeMorpher({
  as = 'react-dom',
  src,
  tools = false,
  verbose = true
}) {
  let state = {
    as,
    src,
    tools,
    verbose,
    customFonts: new Map(),
    viewsById: new Map(),
    viewsToFiles: new Map()
  };

  state.processFiles = async function processFiles({
    filesFontCustom = new Set(),
    filesView = new Set(),
    filesViewCustom = new Set(),
    filesViewLogic = new Set()
  }) {
    if (filesFontCustom.size > 0) {
      processCustomFonts({
        customFonts: state.customFonts,
        filesFontCustom
      });
    } // detect .view files


    await processViewFiles({
      filesView,
      filesViewLogic,
      viewsById: state.viewsById,
      viewsToFiles: state.viewsToFiles
    }); // detect .js files meant to be custom views with "// @view" at the top

    processViewCustomFiles({
      filesViewCustom,
      viewsById: state.viewsById,
      viewsToFiles: state.viewsToFiles
    }); // TODO optimise
    // parse views

    parseViews({
      customFonts: state.customFonts,
      filesView,
      src: state.src,
      verbose: state.verbose,
      viewsById: state.viewsById,
      viewsToFiles: state.viewsToFiles
    });
    let morphedFonts = morphAllFonts({
      as: state.as,
      customFonts: state.customFonts,
      filesView,
      src: state.src,
      viewsToFiles: state.viewsToFiles
    }); // TODO optimise
    // morph views

    let morphedViews = morphAllViews({
      as: state.as,
      filesView,
      getFontImport: makeGetFontImport(state.src),
      getSystemImport: makeGetSystemImport(state.src),
      tools: state.tools,
      viewsById: state.viewsById,
      viewsToFiles: state.viewsToFiles
    });
    let filesToWrite = [...morphedFonts, ...morphedViews, // TODO optimise, only if they changed, cache, etc
    await ensureData(state), await ensureFlow(state), await ensureTools(state), await ensureIsBefore(state), await ensureIsHovered(state), await ensureIsMedia(state)].filter(Boolean);
    await Promise.all(filesToWrite.map(({
      file,
      content
    }) => fs.promises.writeFile(file, content, 'utf-8')));
  };

  return state;
}

function getPointsOfUse({
  view,
  viewsToFiles
}) {
  let filesView = new Set([view.file]);
  let filesViewLogic = new Set();
  let viewsId = new Set();

  if (view.logic) {
    filesViewLogic.add(view.logic);
  }

  for (let viewInView of viewsToFiles.values()) {
    if (viewInView.custom) continue;

    if (viewInView.parsed.view.views.has(view.id)) {
      filesView.add(viewInView.file);

      if (viewInView.logic) {
        filesViewLogic.add(viewInView.logic);
      }

      viewsId.add(viewInView.id);
    }
  }

  return {
    filesView,
    filesViewLogic,
    viewsId
  };
}

async function watchFiles({
  morpher
}) {
  let watcher = chokidar.watch(MATCH, {
    cwd: morpher.src,
    ignored: [path.join('**', 'node_modules', '**'), path.join('**', 'view.js'), path.join('**', 'DesignSystem', 'Fonts', '*.js'), path.join('**', 'Logic', 'ViewsFlow.js'), path.join('**', 'Logic', 'useIsMedia.js'), path.join('**', 'Logic', 'useIsBefore.js'), path.join('**', 'Logic', 'useIsHovered.js'), path.join('**', 'Logic', 'ViewsTools.js'), path.join('**', 'Data', 'ViewsData.js')],
    ignoreInitial: true // awaitWriteFinish: true,

  });
  let skipTimeout = null;
  let processEventsPromise = null;
  let queue = [];

  function onEvent({
    file,
    op
  }) {
    queue.push({
      file: path.join(morpher.src, file),
      op
    });
    maybeProcess();
  }

  function maybeProcess() {
    // if busy, try again in a bit
    clearTimeout(skipTimeout);
    skipTimeout = null;

    if (processEventsPromise) {
      skipTimeout = setTimeout(maybeProcess, 50);
      return;
    }

    processEvents();
  }

  async function processEvents() {
    if (queue.length === 0 || processEventsPromise) {
      return;
    }

    let queueClone = [...queue];
    queue = [];
    processEventsPromise = new Promise(async resolve => {
      try {
        await processQueue({
          queue: queueClone,
          morpher
        });
      } catch (error) {
        console.error(error);
      } finally {
        resolve();
        processEventsPromise = null;
      }
    });
  }

  watcher.on('add', file => onEvent({
    file,
    op: 'add'
  }));
  watcher.on('change', file => onEvent({
    file,
    op: 'change'
  }));
  watcher.on('unlink', file => onEvent({
    file,
    op: 'unlink'
  }));
  return watcher;
}

async function processQueue({
  queue,
  morpher
}) {
  let filesToProcess = {
    filesView: new Set(),
    filesViewLogic: new Set(),
    filesViewCustom: new Set(),
    filesFontCustom: new Set()
  };
  await Promise.all([processUnlinked({
    files: queue.filter(item => item.op === 'unlink'),
    morpher,
    filesToProcess
  }), processAddedOrChanged({
    files: queue.filter(item => item.op !== 'unlink'),
    morpher,
    filesToProcess
  })]);
  await morpher.processFiles(filesToProcess);
  if (!morpher.verbose) return; // && viewsId.size > 0) {
  // Object.entries(filesToProcess).forEach(([key, value]) => {
  //   console.log(chalk.greenBright(key), [...value])
  // })
  //   console.log(chalk.green('M'), [...viewsId].join(', '))
  // }
}

function processUnlinked({
  files,
  morpher,
  filesToProcess
}) {
  return Promise.all(files.map(async ({
    file
  }) => {
    morpher.verbose && console.log(chalk.magenta('X'), path.basename(path.dirname(file)), chalk.dim(file.replace(morpher.src, '').replace(/^\//, '')));

    if (await isFontCustomFile(file)) {
      let id = getFontId(file);
      let font = morpher.customFonts.get(id);
      font.delete(file);

      if (font.size === 0) {
        morpher.customFonts.delete(id);
      }
    } else {
      let viewFile = path.join(path.dirname(file), 'view.blocks');
      let view = morpher.viewsToFiles.get(viewFile);
      if (!view) return;
      processPointsOfUse({
        view,
        morpher,
        filesToProcess
      });
      filesToProcess.filesView.delete(view.file);
      morpher.viewsById.delete(view.id);
      morpher.viewsToFiles.delete(view.file);

      if (await isViewFile(file)) {
        filesToProcess.filesView.delete(file);

        try {
          await fs.promises.unlink(file.replace('view.blocks', 'view.js'));
        } catch (error) {}
      } else if (await isViewLogicFile(file)) {
        filesToProcess.filesView.add(view.file);
        filesToProcess.filesViewLogic.delete(file);
      } else if (await isViewCustomFile(file)) {
        filesToProcess.filesViewCustom.delete(file);
      }
    }
  }));
}

function processAddedOrChanged({
  files,
  morpher,
  filesToProcess
}) {
  return Promise.all(files.map(async ({
    file,
    op
  }) => {
    morpher.verbose && console.log(chalk.yellow(op.toUpperCase()[0]), path.basename(path.dirname(file)), chalk.dim(file.replace(morpher.src, '').replace(/^\//, '')));

    if (await isFontCustomFile(file)) {
      filesToProcess.filesFontCustom.add(file);
    } else {
      if (await isViewFile(file)) {
        filesToProcess.filesView.add(file);
        let logicFile = path.join(path.dirname(file), 'logic.js');

        if (fs.existsSync(logicFile)) {
          filesToProcess.filesViewLogic.add(logicFile);
        }

        let parentFile = path.join(path.dirname(path.dirname(file)), 'view.blocks');

        if (fs.existsSync(parentFile)) {
          filesToProcess.filesView.add(parentFile);
        }
      } else if (await isViewLogicFile(file)) {
        filesToProcess.filesView.add(path.join(path.dirname(file), 'view.blocks'));
        filesToProcess.filesViewLogic.add(file);
      } else if (await isViewCustomFile(file)) {
        filesToProcess.filesViewCustom.add(file);
      }

      let viewFile = path.join(path.dirname(file), 'view.blocks');
      let view = morpher.viewsToFiles.get(viewFile);
      if (!view) return;
      processPointsOfUse({
        view,
        morpher,
        filesToProcess
      });
    } // morpher.verbose &&
    //   console.log(
    //     op === 'add'
    //       ? `${chalk.yellow('A')} ${chalk.green('M')}`
    //       : chalk.green('M'),
    //     getViewIdFromFile(file),
    //     chalk.dim(`-> ${file}`)
    //   )

  }));
}

function processPointsOfUse({
  view,
  morpher,
  filesToProcess
}) {
  let {
    filesView,
    filesViewLogic
  } = getPointsOfUse({
    view,
    viewsToFiles: morpher.viewsToFiles
  });

  for (let file of filesView) {
    filesToProcess.filesView.add(file);
  }

  for (let file of filesViewLogic) {
    filesToProcess.filesViewLogic.add(file);
  }
}

async function watch(options) {
  let morpher = makeMorpher(options);
  await ensureFontsDirectory(morpher.src);
  await morpher.processFiles((await getFiles(morpher.src)));

  if (options.verbose) {
    if (morpher.customFonts.size > 0) {
      console.log(chalk.yellow(`\nCustom fonts detected:`));
      console.log([...morpher.customFonts.keys()].sort().join('\n'));
    }

    let views = [...morpher.viewsToFiles.values()];
    console.log(views.map(view => {
      let msg = view.id;

      if (view.custom) {
        msg = `${view.id} ${chalk.dim('(is custom)')}`;
      } else if (view.logic) {
        msg = `${view.id} ${chalk.dim('(has logic)')}`;
      }

      return `${chalk.yellow('A')} ${chalk.green('M')} ${msg} ${chalk.dim(path.relative(process.cwd(), view.file))}`;
    }).sort().join('\n'));
    views.forEach(maybePrintWarnings);
  }

  if (options.once) return;
  let watcher = watchFiles({
    morpher
  });
  process.on('beforeExit', () => {
    console.log('Stopping Views morpher file watcher...');
    watcher.close();
  });
}

let wait = time => new Promise(resolve => setTimeout(resolve, time));

(async function () {
  let {
    _,
    as,
    clean: clean$1,
    help,
    tools,
    watch: shouldWatch,
    verbose,
    version
  } = minimist(process.argv.slice(2), {
    alias: {
      help: 'h'
    },
    booleans: ['clean', 'help', 'tools', 'watch', 'version'],
    default: {
      as: 'react-dom',
      clean: false,
      tools: true,
      verbose: true,
      version: false,
      watch: false
    }
  });

  if (!shouldWatch && tools) {
    tools = false;
  }

  if (help) {
    console.log(`
  views-morph [directory]
    --as            target platform
                      react-dom (default)
                      react-native
                      react-pdf
    --clean         clean the autogenerated .view.js files
    --tools         use with Views Tools, defauls to true when
                    --watch is enabled, otherwise defaults to false
    --verbose       defaults to true
    --version       print the version
    --watch         watch a directory and produce .view.js files
  `);
    process.exit();
  }

  if (version) {
    console.log(`v${pkg.version}`);
    process.exit();
  }

  let input = Array.isArray(_) && _[0];

  if (!input || !(await fs.promises.stat(input)).isDirectory()) {
    console.error(`You need to specify an input directory to watch. ${input} is a file.`);
    process.exit();
  }

  if (!path.isAbsolute(input)) {
    input = path.normalize(path.join(process.cwd(), input));
  }

  try {
    if ((await fs.promises.stat(path.join(input, 'src'))).isDirectory()) {
      input = path.join(input, 'src');
    }
  } catch (error) {}

  if (clean$1) {
    console.log(`Cleaning up ${input}...`);
    await clean(input, verbose);
    process.exit();
  }

  updateNotifier({
    pkg
  }).notify();

  if (verbose) {
    console.log(chalk.underline(`Views Tools morpher v${pkg.version}`));
    console.log(`\nWill morph files at "${chalk.green(input)}" as "${chalk.green(as)}" ${tools ? 'with Views Tools' : 'without Views Tools'}`);

    if (shouldWatch && !tools) {
      console.log(chalk.bgRed('                                               '));
      console.log();
      console.log(`🚨 You're missing out!!!`);
      console.log(chalk.bold('🚀 Views Tools can help you find product market\n   fit before you run out of money.'));
      console.log();
      console.log('✨ Find out how 👉', chalk.bold(chalk.green('https://views.tools')));
      console.log();
      console.log(chalk.bgRed('                                               '));
      await wait(15000);
    }

    console.log(chalk.yellow('A'), '= Added');
    console.log(chalk.green('M'), `= Morphed`);
    console.log(chalk.blue('X'), `= Deleted`);
    console.log('\nPress', chalk.blue('ctrl+c'), 'to stop at any time.\n');
  }

  watch({
    as,
    once: !shouldWatch,
    src: input,
    tools,
    verbose
  });
})();
//# sourceMappingURL=bin.js.map