https://dat-ecosystem.org/src/node_modules/projects-page/projects-page.js

1const app_projects = require('app-projects')
2const the_dat = require('the-dat')
3const app_footer = require('app-footer')
4/******************************************************************************
5  PROJECTS PAGE COMPONENT
6******************************************************************************/
7// ----------------------------------------
8// MODULE STATE & ID
9var count = 0
10const [cwd, dir] = [process.cwd(), __filename].map(x => new URL(x, 'file://').href)
11const ID = dir.slice(cwd.length)
12const STATE = { ids: {}, net: {} } // all state of component module
13// ----------------------------------------
14const sheet = new CSSStyleSheet
15sheet.replaceSync(get_theme())
16const default_opts = { }
17const shopts = { mode: 'closed' }
18// ----------------------------------------
19module.exports = projects_page
20// ----------------------------------------
21function projects_page (opts = default_opts, protocol) {
22  // ----------------------------------------
23  // ID + JSON STATE
24  // ----------------------------------------
25  const id = `${ID}:${count++}` // assigns their own name
26  const status = {}
27  const state = STATE.ids[id] = { id, status, wait: {}, net: {}, aka: {} } // all state of component instance
28  const cache = resources({})
29  // ----------------------------------------
30  // OPTS
31  // ----------------------------------------
32  const { data } = opts
33  // ----------------------------------------
34  // PROTOCOL
35  // ----------------------------------------
36  const on = {
37    '': msg => {
38      console.error('what')
39    }
40  }
41  const channel = use_protocol('up')({ protocol, state, on })
42  // ----------------------------------------
43  // TEMPLATE
44  // ----------------------------------------
45  const el = document.createElement('div')
46  const shadow = el.attachShadow(shopts)
47  // adding a `main-wrapper` 
48  shadow.adoptedStyleSheets = [sheet]
49  shadow.innerHTML = `<div class="main-wrapper">
50    <div class="main"></div>
51  </div>`
52  const main = shadow.querySelector('.main')
53  // ----------------------------------------
54  // ELEMENTS
55  // ----------------------------------------
56  { // the dat
57    const on = {}
58    const protocol = use_protocol('the_dat')({ state, on })
59    const opts = { data }
60    const element = shadowfy()(the_dat(opts, protocol))
61    main.append(element)
62  }
63  { // projects
64    const on = {}
65    const protocol = use_protocol('app_projects')({ state, on })
66    const opts = { data }
67    const element = shadowfy()(app_projects(opts, protocol))
68    main.append(element)
69  }
70  { // footer
71    const on = {}
72    const protocol = use_protocol('app_footer')({ state, on })
73    const opts = { data }
74    const element = shadowfy()(app_footer(opts, protocol))
75    main.append(element)
76  }
77  // ----------------------------------------
78  // INIT
79  // ----------------------------------------
80
81  return el
82}
83function get_theme () {
84  return `
85    * {
86      box-sizing: border-box;
87    }
88    .main-wrapper {
89      container-type: inline-size;
90    }
91    .main {
92      margin: 0;
93      padding: 30px 10px;
94      opacity: 1;
95      background-size: 16px 16px;
96    }
97    @container (min-width: 856px) {
98      .main {
99        padding-inline: 20px !important;
100      }
101    }
102  `
103}
104// ----------------------------------------------------------------------------
105function shadowfy (props = {}, sheets = []) {
106  return element => {
107    const el = Object.assign(document.createElement('div'), { ...props })
108    const sh = el.attachShadow(shopts)
109    sh.adoptedStyleSheets = sheets
110    sh.append(element)
111    return el
112  }
113}
114function use_protocol (petname) {
115  return ({ protocol, state, on = { } }) => {
116    if (petname in state.aka) throw new Error('petname already initialized')
117    const { id } = state
118    const invalid = on[''] || (message => console.error('invalid type', message))
119    if (protocol) return handshake(protocol(Object.assign(listen, { id })))
120    else return handshake
121    // ----------------------------------------
122    // @TODO: how to disconnect channel
123    // ----------------------------------------
124    function handshake (send) {
125      state.aka[petname] = send.id
126      const channel = state.net[send.id] = { petname, mid: 0, send, on }
127      return protocol ? channel : Object.assign(listen, { id })
128    }
129    function listen (message) {
130      const [from] = message.head
131      const by = state.aka[petname]
132      if (from !== by) return invalid(message) // @TODO: maybe forward
133      console.log(`[${id}]:${petname}>`, message)
134      const { on } = state.net[by]
135      const action = on[message.type] || invalid
136      action(message)
137    }
138  }
139}

140// ----------------------------------------------------------------------------
141function resources (pool) {
142  var num = 0
143  return factory => {
144    const prefix = num++
145    const get = name => {
146      const id = prefix + name
147      if (pool[id]) return pool[id]
148      const type = factory[name]
149      return pool[id] = type()
150    }
151    return Object.assign(get, factory)
152  }
153}