{"id":13805451,"url":"https://github.com/cherifGsoul/inertia-can","last_synced_at":"2025-05-13T19:31:07.137Z","repository":{"id":56160407,"uuid":"308707857","full_name":"cherifGsoul/inertia-can","owner":"cherifGsoul","description":"The Canjs adapter for Inertia.js","archived":false,"fork":false,"pushed_at":"2020-11-25T20:40:07.000Z","size":32,"stargazers_count":14,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-11-16T04:11:35.795Z","etag":null,"topics":["canjs","canjs-adapter","inertiajs","inertiajs-adapter"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cherifGsoul.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-10-30T18:05:19.000Z","updated_at":"2022-07-24T07:24:42.000Z","dependencies_parsed_at":"2022-08-15T13:50:38.577Z","dependency_job_id":null,"html_url":"https://github.com/cherifGsoul/inertia-can","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cherifGsoul%2Finertia-can","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cherifGsoul%2Finertia-can/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cherifGsoul%2Finertia-can/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cherifGsoul%2Finertia-can/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cherifGsoul","download_url":"https://codeload.github.com/cherifGsoul/inertia-can/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225254334,"owners_count":17445164,"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":["canjs","canjs-adapter","inertiajs","inertiajs-adapter"],"created_at":"2024-08-04T01:01:01.257Z","updated_at":"2024-11-18T21:31:14.228Z","avatar_url":"https://github.com/cherifGsoul.png","language":"JavaScript","funding_links":[],"categories":["Adapters"],"sub_categories":["Server-side"],"readme":"# inertia-can\n\nThe CanJS adapter for inertia.js\n\n## Introduction:\nBefore using this library, is important to know [what is Inertia.js](https://inertiajs.com/#top), [what is it for](https://inertiajs.com/who-is-it-for) and [how it works](https://inertiajs.com/how-it-works), in the [official Inertia.js website](https://inertiajs.com/)\n\nAlso, from the official [CanJS](https://canjs.com/) website, is very important to know:\n- [What is CanJS](https://canjs.com/doc/about.html)\n- [Setting up CanJS](https://canjs.com/doc/guides/setup.html)\n- CanJS [Observables](https://canjs.com/doc/api.html#Observables)\n- CanJS [Custom Element Basics](https://canjs.com/doc/api.html#CustomElementBasics)\n- CanJS [`can-stache-element`](https://canjs.com/doc/can-stache-element.html)\n- CanJS [`can-stache`](https://canjs.com/doc/can-stache.html)\n- [can-stache-bindings](https://canjs.com/doc/can-stache-element.html#Passingtemplates_customizinglayout_)\n- [`can-stache-portal`](https://canjs.com/doc/can-stache.portal.html)\n- [Passing custom templates to custom elements](https://canjs.com/doc/can-stache-element.html#Passingtemplates_customizinglayout_)\n\n## Installation:\n\nInstall inertiajs and canjs adapter using npm or yarn:\n\n```shell\n$ npm install @inertiajs/inertia can inertia-can\n```\n\n```shell\n$ yarn add @inertiajs/inertia can inertia-can\n```\n\n## Application initialization:\n\n`inertia-app` is a [`StacheElement`](https://canjs.com/doc/can-stache-element.html) custom element, needs to be intialized in the main js file of the application like the following:\n\n```js\nimport { InertiaApp } from \"inertia-can\";\n\nconst app = new InertiaApp().initialize({\n  initialpage: json.parse(target.dataset.page),\n  resolvecomponent: (name) =\u003e\n    import(`./pages/${name}`).then((module) =\u003e module.default),\n});\n\nlet target = document.getElementById(\"app\");\napp.initialize({ target });\ntarget.appendChild(app);\n```\n\nThe code above will instantiated `inertia-app` custom and inserted it in the application root view html page.\n\nA `async/await` polyfill like [regenerator-runtime](https://www.npmjs.com/package/regenerator-runtime) might be needed.\n\n\u003e **note**:\n\u003e it is important to not instantiate the returned module in `resolvecomponent` function, the adapter will handle the instantiation and passing the needed `StacheElement` instance properties.\n\n## Pages:\n\nPages are just `StacheElement` custom tags, for example:\n\n```js\nimport { StacheElement } from 'can';\n\nexport default class Dashboard extends StacheElement {\n    static view = `\u003ch1\u003eDashboard\u003c/h1\u003e`\n\n}\n\ncustomElements.define('app-dashboard', Dashboard);\n\n```\n\n## Persistent layouts:\n\nThe example of the `\u003capp-dashboard /\u003e` page above will have its own local layout, this is not useful when some pages has shared layout.\nto make a [presistent layout](https://inertiajs.com/pages#persistent-layouts):\n\n1- Define a layout custom element:\n\n```js\nimport { StacheElement } from \"can\";\nimport { store } from 'inertia-can';\n\nclass Layout extends StacheElement {\n  static view = `\n        {{# portal(head)}}\n            \u003ctitle\u003e\n                {{# if (this.title) }}\n                    {{ this.title }} - my app\n                {{ else }}\n                    my app\n                {{/ if }}\n            \u003c/title\u003e\n        {{/ portal }}\n\n        \u003capp-navbar /\u003e\n\n        \u003capp-side-menu /\u003e\n\n        {{ this.component }}\n    `;\n\n  static props = {\n    head: {\n      get default() {\n        return document.head;\n      },\n    },\n  };\n\n  get title() {\n    return this.component.title;\n  }\n\n  get component() {\n    return store.component;\n  }\n}\ncustomElements.define(\"app-layout\", layout);\n\nexport default new Layout();\n```\n\nThe above example assume there's a `\u003capp-navbar /\u003e` and `\u003capp-side-menu /\u003e` already defined and imported.\n\nNotice CanJS [`portal`](https://canjs.com/doc/can-stache.portal.html) feature is used to change the HTML document title inside the head tag.\n\nThe `store` an observable object where the application state defined, it contains the following with the default values:\n```js\n{   \n    component: null,\n    page: {},\n    key: null\n}\n```\n\n\u003e __NOTE__:\n\u003e It is important to export an instance of the layout custom element, like this the layout will not be instantiated on every page change.\n\n2- Define a page custom element, so the example of `\u003capp-dashboard /\u003e` will be:\n\n```js\nimport { StacheElement } from 'can';\nimport { default as layout } from '@/components/layout/layout';\n\nexport default class Dashboard extends StacheElement {\n\n    static view = `\n        \u003ch1\u003e {{ this.title }} \u003c/h1\u003e\n    `\n\n    get layout() {\n        return layout;\n    }\n\n    get  title() {\n        return 'Tableau de bord';\n    }\n\n}\n\ncustomElements.define('app-dashboard', Dashboard);\n\n```\n\n## Links:\n\nLinks are created using `\u003cinertia-link\u003e` custom element:\n\n```js\nimport { StacheElement } from 'can';\nimport { Link } from 'inertia-can';\n\nclass MyPage extends satcheElement {\n    static view = `\n        \u003cinertia-can href:raw='https://canjs.com/'\u003e\n            \u003ccan-template name=\"linkTemplate\"\u003e\n                canjs website\n            \u003c/can-template\u003e\n        \u003c/inertia-can\u003e\n    `\n}\n\ncustomElements.define('my-page', Mypage);\n```\n\nNotice the `can-template` tag is used to passe [custom templates](https://canjs.com/doc/can-stache-element.html#passingtemplates_customizinglayout_) to `StacheElement`.\n\nThe following properties are available for `inertia-link`:\n\n`data`: type: deepobserble, required: false\n\n`href`: type: string\n\n`method`: type: string, default: 'get' (post, get, put, patch, delete)\n\n`replace`: type: boolean, default: false\n\n`preserveScroll`: type: boolean, defaut: false\n\n`preserveState`: type: boolean, default: false\n\n`only`: type:(deepobservable), required: false\n\n`headers` type: deepobservable, required: false\n\n`linkTemplate` type: function, required: true\n\n`classname`: type: string\n\nbasically, `inertia-link` is a wrapper around [inertia link](https://inertiajs.com/links)\n\n\n## License\n\n[MIT License](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FcherifGsoul%2Finertia-can","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FcherifGsoul%2Finertia-can","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FcherifGsoul%2Finertia-can/lists"}