{"id":16227630,"url":"https://github.com/leafoftree/svelte-mode","last_synced_at":"2025-04-07T06:11:52.702Z","repository":{"id":47736378,"uuid":"234494947","full_name":"leafOfTree/svelte-mode","owner":"leafOfTree","description":"Emacs major mode for Svelte.","archived":false,"fork":false,"pushed_at":"2025-03-31T00:50:41.000Z","size":41,"stargazers_count":86,"open_issues_count":5,"forks_count":5,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-31T01:27:56.718Z","etag":null,"topics":["emacs","indent","mode","svelte","svelte-mode","syntax"],"latest_commit_sha":null,"homepage":"","language":"Emacs Lisp","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"lgpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leafOfTree.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-01-17T07:27:28.000Z","updated_at":"2025-03-31T00:50:45.000Z","dependencies_parsed_at":"2024-12-27T06:07:06.437Z","dependency_job_id":"78ff641a-b7e6-4475-a38c-ee944c0ef8b7","html_url":"https://github.com/leafOfTree/svelte-mode","commit_stats":{"total_commits":71,"total_committers":5,"mean_commits":14.2,"dds":0.05633802816901412,"last_synced_commit":"5b136e224e01b0358dd0dca68c57b0d0c93099b5"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leafOfTree%2Fsvelte-mode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leafOfTree%2Fsvelte-mode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leafOfTree%2Fsvelte-mode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leafOfTree%2Fsvelte-mode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leafOfTree","download_url":"https://codeload.github.com/leafOfTree/svelte-mode/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247601448,"owners_count":20964864,"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":["emacs","indent","mode","svelte","svelte-mode","syntax"],"created_at":"2024-10-10T12:53:21.057Z","updated_at":"2025-04-07T06:11:52.678Z","avatar_url":"https://github.com/leafOfTree.png","language":"Emacs Lisp","readme":"\u003cimg src=\"https://raw.githubusercontent.com/leafOfTree/leafOfTree.github.io/master/svelte-mode.svg\" width=\"60\" height=\"60\" alt=\"icon\" align=\"left\"/\u003e\n\n# svelte-mode\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://github.com/altercation/vim-colors-solarized\"\u003e\n\u003cimg alt=\"screenshot\" src=\"https://raw.githubusercontent.com/leafOfTree/leafOfTree.github.io/master/emacs-svelte-mode.png\" width=\"220\"/\u003e\n\u003c/a\u003e\n\u003c/p\u003e\n\nEmacs major mode for `.svelte` files. It's based on [mhtml-mode][0]. It requires `(\u003e= emacs-major-version 26)`.\n\n\u003e [!TIP]\n\u003e For tree-sitter major mode,  you can check [svelte-ts-mode](https://github.com/leafOfTree/svelte-ts-mode).\n\n## Installation\n\n- [MELPA][2]\n\n  \u003ckbd\u003eM-x\u003c/kbd\u003e `package-install` \u003ckbd\u003eRET\u003c/kbd\u003e `svelte-mode` \u003ckbd\u003eRET\u003c/kbd\u003e\n\n- Manually\n\n  ```bash\n  git clone https://github.com/leafOfTree/svelte-mode --depth 1\n  ```\n\n  ```lisp\n  ; ~/.emacs\n  (add-to-list 'load-path \"/path/to/svelte-mode\")\n  (require 'svelte-mode)\n  ```\n\n  For [Spacemacs][1], put them inside `dotspacemacs/user-config`.\n\n  ```lisp\n  ; ~/.spacemacs\n  (defun dotspacemacs/user-config ()\n        \n      (add-to-list 'load-path \"/path/to/svelte-mode\")\n      (require 'svelte-mode)\n  ```\n  \nSvelte-mode should be auto enabled for `.svelte` files if everything goes well. Please stay up to date. Feel free to open an issue or a pull request.\n\n\n## How it works\n\nThis major mode includes `JavaScript/CSS` as `submode` in `html-mode`. \n\nSupports\n\n- Svelte directives and blocks.\n- emmet-mode HTML/CSS detection.\n- `typescript-mode` in `\u003cscript lang=\"ts\"\u003e...\u003c/script\u003e`\n- `sass-mode` in `\u003cstyle lang=\"sass\"\u003e...\u003c/style\u003e`.\n- `pug-mode` in `\u003ctemplate lang=\"pug\"\u003e...\u003c/template\u003e`.\n- `coffee-mode` in `\u003cscript lang=\"coffee\"\u003e...\u003c/script\u003e`.\n\n\u003e [!IMPORTANT]\n\u003e You need to **install** these modes first.\n\n## Customize\n\n\u003ckbd\u003eM-x\u003c/kbd\u003e `customize-set-variable` \u003ckbd\u003eRET\u003c/kbd\u003e `\u003cvariable-name\u003e` \u003ckbd\u003eRET\u003c/kbd\u003e \n\nOr customize variable programatically, like\n```lisp\n(customize-set-variable 'svelte-basic-offset 2)\n```\nSee detail by \u003ckbd\u003eM-x\u003c/kbd\u003e `describe-variable` \u003ckbd\u003eRET\u003c/kbd\u003e `\u003cvariable-name\u003e` \u003ckbd\u003eRET\u003c/kbd\u003e.\n\n| name                        | description                                                       | default           |\n|-----------------------------|-------------------------------------------------------------------|-------------------|\n| svelte-basic-offset         | Specifies the basic indentation level.                            | sgml-basic-offset |\n| svelte-tag-relative-indent  | Whether `\u003cscript\u003e` and `\u003cstyle\u003e` bodies indent to the tag.        | t                 |\n| svelte-display-submode-name | Whether to display submode name in the status line.               | nil               |\n\n\n[0]: https://github.com/emacs-mirror/emacs/blob/master/lisp/textmodes/mhtml-mode.el\n[1]: https://github.com/syl20bnr/spacemacs\n[2]: https://melpa.org/#/svelte-mode\n\n## Configuration hacks\n\n### Closing tags for components with \"reserved\" names\nSGML mode, which `svelte-mode` is derived from, automatically closes your current tag for you with the `C-c C-e` shortcut\n(`sgml-close-tag`). This however does not work for components that share their name with unclosed html tags, like for example\nthe `Link` component from `svelte-routing`. SGML mode by default checks whether tags are supposed to be closed or not by comparing\ntag names with lists of element names case-insensitively, so `\u003cLink\u003e` is equivalent to `\u003clink\u003e`. The following configuration snippet \nmakes the comparison of tag names by SGML mode case-sensitive when svelte-mode is the current active major-mode in the buffer. Just\nadd it to your config file and you're good to go.\n\n```elisp\n(defun svelte-mode-sgml-empty-tag-p-advice (old-function tag-name)\n  \"Advice function intended to wrap around `sgml-empty-tag-p\n\nMakes case significant when checking whether tags need to be\nclosed or not, to not confuse elements with Svelte components.\"\n  (if (eq major-mode 'svelte-mode)\n      (assoc-string tag-name sgml-empty-tags)\n    (funcall old-function tag-name)))\n\n(defun svelte-mode-sgml-unclosed-tag-p-advice (old-function tag-name)\n  \"Advice function intended to wrap around `sgml-unclosed-tag-p\n\nMakes case significant when checking whether tags need to be\nclosed or not, to not confuse elements with Svelte components.\"\n  (if (eq major-mode 'svelte-mode)\n      (assoc-string tag-name sgml-unclosed-tags)\n    (funcall old-function tag-name)))\n\n(advice-add 'sgml-empty-tag-p :around 'svelte-mode-sgml-empty-tag-p-advice)\n(advice-add 'sgml-unclosed-tag-p :around 'svelte-mode-sgml-unclosed-tag-p-advice)\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleafoftree%2Fsvelte-mode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleafoftree%2Fsvelte-mode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleafoftree%2Fsvelte-mode/lists"}