{"id":21900289,"url":"https://github.com/cryptoc1/dunno","last_synced_at":"2025-03-22T05:44:52.352Z","repository":{"id":82170073,"uuid":"80624316","full_name":"Cryptoc1/dunno","owner":"Cryptoc1","description":"Client side applications, made easy.","archived":false,"fork":false,"pushed_at":"2017-04-18T16:21:35.000Z","size":344,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-27T06:31:07.149Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Cryptoc1.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-02-01T13:50:44.000Z","updated_at":"2017-02-01T22:51:16.000Z","dependencies_parsed_at":null,"dependency_job_id":"5ed23314-4fa3-4cc3-bd9d-1b7cd0a318ee","html_url":"https://github.com/Cryptoc1/dunno","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cryptoc1%2Fdunno","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cryptoc1%2Fdunno/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cryptoc1%2Fdunno/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Cryptoc1%2Fdunno/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Cryptoc1","download_url":"https://codeload.github.com/Cryptoc1/dunno/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244913004,"owners_count":20530769,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-28T15:07:12.309Z","updated_at":"2025-03-22T05:44:52.346Z","avatar_url":"https://github.com/Cryptoc1.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dunno\n\nDunno is small experiment with client JavaScript for applications.\n\n## Getting Started\n\nDunno apps start by extending, or sub-classing `Dunno.Application`. The `Application` class provides abstraction to storage contexts (through IndexedDB and localStorage), a settings context through localStorage, and special key press handlers for application shortcuts.\n\nTo begin, last create our application class.\n\n```javascript\nclass TutorialApp extends Dunno.Application {\n  constructor() {\n    super()\n\n    /*\n     Now we can setup anything we'll need for the app (event listeners, loading some dynamic content, create subviews, etc)\n    */\n\n    var self = this\n\n    this.view.append(this.editor = new TutorialApp.UI.EditorView())\n\n    this.on('ctrl+shift+h', (e) =\u003e {\n      e.preventDefault()\n      self.editor.hide()\n    })\n  }\n\n  // The close method is called when the page is being loaded, or the current app instance is explicitly being closed\n  close() {\n    super.close.apply(this, arguments)\n\n    this.store.set('editor.content', this.editor.value, (err, res) =\u003e {\n      // do nothing\n    })\n\n    /*\n      Returning a value that evaluates to `true` in an if statement will cause the application to wait for user feedback before exiting\n      (based off of `window.onbeforeunload`'s behavior)\n    */\n    return true\n  }\n\n  /*\n    Dunno.Application.render() will clear the existing DOM and append our master view (`this.view`),\n    but we can do a little more, like focusing on a subview, or settings it's content from the store\n  */\n  render() {\n    super.render() // required call to superclass\n\n    var self = this\n\n    // load the editor's contents from the store (this shouldn't actually be done in render though...)\n    this.store.get('editor.content', (err, content) =\u003e {\n      if (!err) {\n        self.editor.value = content\n        self.editor.focus()\n      }\n    })\n  }\n}\n```\n\n### Understanding Views\n\nIn Dunno, \"Views\" are just ES6 Custom elements (classes that extend `HTMLElement`, and family). For example, the editor subview that was used above could look something like this:\n\n```javascript\n// we use a IIFE for cleaner scoping when using document.registerElement to \"export the view\"\n;((undefined) =\u003e {\n\n  TutorialApp.UI.EditorView = class extends Dunno.UI.TextView {\n    constructor(options = {}) {\n      super(options)\n    }\n\n    hide() {\n      this.style.display = 'none'\n    }\n\n    show() {\n      this.style.display = 'block'\n    }\n\n    toggle() {\n      if (!this.visible) {\n        this.show()\n      } else {\n        this.hide()\n      }\n    }\n\n    // we can use getter/setter for binding a value property to the Node's textContent\n    get value() {\n      return this.textContent\n    }\n\n    set value(value) {\n      this.textContent = value\n    }\n\n    get visible() {\n      return this.style.display !== 'none' \u0026\u0026 this.style.visibility !== 'hidden' \u0026\u0026 this.style.opacity \u003e 0\n    }\n  }\n\n  window.customElements.define('editor-view', TutorialApp.UI.EditorView)\n})()\n```\n\nYou can find more information about ES6 and custom elements on [MDN](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Custom_Elements/Custom_Elements_with_Classes)\n\nIn Dunno, all subviews are added to a master view to be rendered in the DOM. This master view is really just another custom element that's registered within `Dunno`. To add subviews to the master view, you simply append them like you would in good 'ol fashioned JavaScript, `this.view.append(new TutorialApp.UI.EditorView())`.\n\n### `Dunno.Application` and Events\n\n`Dunno.Application` is an `EventEmitter` (not to be confused with the node.js class), which makes it easy to set listeners and trigger/emit events on a given class. From the `TutorialApp` example above, we used `.on()` to set a shortcut listener to hide the editor view. Keyboard shortcuts are just an example of how the `EventEmitter` makes it easy for an application to trigger and manage events for control flow.\n\n### Putting it All Together\n\nNow that we've defined our `Dunno.Application` sub-class, defined all of our views, it's time to put them to use. This is as simple as constructing a new instance of your `Application` class, and calling `.render()` when it should be added to the DOM.\n\n```javascript\nvar app = window.app = new TutorialApp()\n\nwindow.onload = () =\u003e {\n  app.render()\n}\n```\n\nThere's a little bit more you could do to personalize this experience though.\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\u003c/head\u003e\n\n  \u003cbody\u003e\n\n    \u003c!-- This element will be removed when the Application renders, allowing you to customize the initial loading experience until the call to `.render()` --\u003e\n    \u003cdiv class=\"spinner loading\"\u003e\u003c/div\u003e\n\n    \u003cdunno\u003e\n      \u003c!-- Anything in a `dunno` element won't be removed from the DOM when the application renders --\u003e\n\n      \u003cscript src=\"path/to/dunno.js\"\u003e\u003c/script\u003e\n      \u003cscript src=\"path/to/myapp.js\"\u003e\u003c/script\u003e\n\n      \u003cscript\u003e\n        var app = window.app = new TutorialApp()\n\n        window.onload = () =\u003e {\n          app.render()\n        }\n      \u003c/script\u003e\n\n    \u003c/dunno\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcryptoc1%2Fdunno","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcryptoc1%2Fdunno","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcryptoc1%2Fdunno/lists"}