@magic

@magic/core files

There are multiple magic files and directories.

  • /pages - files in the page directory map to urls in your app.
  • /assets - custom components, @magic-modules get imported here
  • /assets/static - static files
  • /assets/themes - theme directory, @magic-themes get imported here
  • /assets/lib.mjs - imports npm and local but external packages into your app
  • /app.mjs - gets merged into the app, can set state, actions, style here
  • /config.mjs - custom config for your app
  • /assets/Menu.mjs - custom Menu for your app

/pages

the pages dir contains the pages of your webapp.

each page has it's own state and actions, but also inherits the global state and actions from the app and it's dependencies

pages directory to url map

for the domain mag.ic:

/pages/index.mjs === http://mag.ic//pages/pageName.mjs === http://mag.ic/pageName//pages/page-name.mjs === http://mag.ic/page-name//pages/page_name.mjs === http://mag.ic/page_name//pages/dir/index.mjs === http://mag.ic/dir//pages/dir/name.mjs === http://mag.ic/dir/name/

example page

Pages can use javascript, html or markdown

javascript example

A magic javascript page is a @magic-module. The only difference is that pages get exposed via http

export const View = state =>  div({ class: 'cl' }, [    'this is the page content.',    state.variable,  ])export const state = {  variable: 'test',}export const actions = {  changeVar: state => ({ ...state, variable: 'changed' }),}export const style = {  '.cl': {    color: 'green',  },}

html example

html pages can only export state and View.

---@state{  "title": "html file example",    "description": "this module gets imported from a html file."}---<h2>&#36;{ state.title }</h4><p>{{ state.description }}</p>

markdown example

markdown pages can only export state and View.

---@state {  "title": "markdown file example",  "description": "markdown file description"}---## &#36;{state.title}&#36;{state.description}

assets

the assets dir contains custom components of your app.

you can import additional @magic-modules here

/assets/index.mjs

export default {  Custom: () => div('custom component'),  Pre: require('@magic-modules/pre),}

/assets/static

the static dir contains all of your static assets.every file in this directory gets copied to the public dir.image and svg files get minified using imagemin.

text and binary files get compressed using the optional node-zopfli-es (if it is installed)

/assets/themes

the themes directory contains...themes.

a magic theme is an object of css rules, see @magic/css for more examples and documentation.

example theme

export default {  'body': {    color: 'blue',  },}

/app.mjs

the /app.mjs file allows you to set global state, actions, and styles

/example/app.mjs

export const state = {  globalStateVar: 'globally available',}export const actions = {  globalAction: () => ({ globalStateVar: 'overwritten.' }),}export const style = {  'body': {    color: 'green',  },}

/config.mjs

the /config.mjs file allows you to set various aspects of your app

/config.mjs example

export default {  // the local root directory of the magic app  ROOT: 'example',  // gets suffixed to the url. in this case domain.com/core/ will be the page root.  WEB_ROOT: '/core/',  // the theme in use, lives in {ROOT}/assets/themes/{name} or can be installed as either '@magic-themes/{name}' or 'magic-theme-{name}'  THEME: 'docs',  // the full url of the page.  URL: 'magic.github.io/core/',  // the public dir the bundles get written to  PUBLIC: 'docs',  // the directory in the pages directory that holds the blog posts  // if this is not set, no blog is created.  BLOG_DIR: 'news',  // append these modules after the app loaded and only if javascript is enabled.  // can be used to add features that won't do anything without js anyways.  HOIST: ['LightSwitch', 'NoSpy'],  // default CLIENT_LIB_NAME, overwrite to change names of transpiled css and js files  CLIENT_LIB_NAME: 'magic',  // this is set to be able to test broken link behaviour.  // DO NOT ENABLE IN YOUR APP (unless you need to because reasons...)  NO_CHECK_LINKS_EXIT: true,  // tags written to the html before the #magic container  PREPEND_TAGS: [{ name: 'div', props: { id: 'PREPENDTag' } }],  // tags written to the html after the #magic container  APPEND_TAGS: [{ name: 'div', props: { id: 'APPENDTag' } }],  // script files, embedded before the magic.js script  PREPEND_SCRIPTS: ['/prependScript.js'],  // script files, embedded after the magic.js script  APPEND_SCRIPTS: ['/appendScript.js'],  // js files that get written directly into the magic.js script, before the magic code.  PREPEND_JS: ['/prependJs.js'],  // js files that get written directly into the magic.js script, after the magic code.  APPEND_JS: ['/appendJs.js'],  // css written into the magic.css file, before the magic css  // use this to set defaults that get overwritten by the generated app css  PREPEND_CSS: ['/prependCss.css'],  // css written into the magic.css file, after the magic css  // use this to overwrite the generated app css  APPEND_CSS: ['/appendCss.css'],  // add additional static file directories that will get added to app.static[name]  ADD_STATIC: ['node_modules/dir/name/'],  // this option adds the  // 'X-Clacks-Overhead', 'GNU Terry Pratchet'  // http header  // see http://www.gnuterrypratchett.com/  FOR_DEATH_CAN_NOT_HAVE_HIM: true,}

Menu.mjs on github