├── _config.yml ├── examples ├── .gitignore ├── public │ ├── favicon.png │ ├── index.html │ └── global.css ├── src │ ├── main.js │ └── App.svelte ├── package.json ├── README.md └── rollup.config.js ├── docs ├── favicon.ico ├── main.59a2cbd2ea6051b1f337.bundle.js.map ├── main.2d2aca9145d7de6006ef.bundle.js ├── runtime~main.59a2cbd2ea6051b1f337.bundle.js.map ├── vendors~main.59a2cbd2ea6051b1f337.bundle.js.map ├── index.html ├── runtime~main.8bfece81a1ead32e094c.bundle.js ├── runtime~main.59a2cbd2ea6051b1f337.bundle.js ├── iframe.html ├── sb_dll │ ├── storybook_ui_dll.LICENCE │ └── storybook_ui-manifest.json ├── vendors~main.59a2cbd2ea6051b1f337.bundle.js.LICENSE.txt └── main.59a2cbd2ea6051b1f337.bundle.js ├── .travis.yml ├── src ├── index.js ├── Video.svelte ├── Image.svelte └── utils.js ├── .gitignore ├── jest.config.js ├── babel.config.js ├── stories ├── image.stories.js └── video.stories.js ├── CHANGELOG.md ├── test ├── video.spec.js └── image.spec.js ├── .github ├── ISSUE_TEMPLATE │ ├── feature_request.md │ └── bug_report.md └── pull_request_template.md ├── LICENSE ├── rollup.config.js ├── package.json └── README.md /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-minimal -------------------------------------------------------------------------------- /examples/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /public/build/ 3 | 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary-svelte/HEAD/docs/favicon.ico -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "node" 4 | - "lts/*" 5 | before_script: 6 | - npm run build 7 | -------------------------------------------------------------------------------- /examples/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cloudinary/cloudinary-svelte/HEAD/examples/public/favicon.png -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | export { default as Image } from './Image.svelte'; 2 | export { default as Video } from './Video.svelte'; 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .idea 2 | .vscode 3 | .DS_Store 4 | .nvmrc 5 | node_modules 6 | dist 7 | package-lock.json 8 | yarn.lock 9 | cloudinary-svelte*.tgz -------------------------------------------------------------------------------- /docs/main.59a2cbd2ea6051b1f337.bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"main.59a2cbd2ea6051b1f337.bundle.js","sources":["webpack:///main.59a2cbd2ea6051b1f337.bundle.js"],"mappings":"AAAA","sourceRoot":""} -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | transform: { 3 | '^.+\\.svelte$': 'svelte-jester', 4 | '^.+\\.js$': 'babel-jest', 5 | }, 6 | moduleFileExtensions: ['js', 'svelte'], 7 | }; 8 | -------------------------------------------------------------------------------- /docs/main.2d2aca9145d7de6006ef.bundle.js: -------------------------------------------------------------------------------- 1 | (window.webpackJsonp=window.webpackJsonp||[]).push([[0],{416:function(n,o,p){p(417),p(560),p(1234),p(1236),n.exports=p(1271)},479:function(n,o){}},[[416,1,2]]]); -------------------------------------------------------------------------------- /docs/runtime~main.59a2cbd2ea6051b1f337.bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"runtime~main.59a2cbd2ea6051b1f337.bundle.js","sources":["webpack:///runtime~main.59a2cbd2ea6051b1f337.bundle.js"],"mappings":"AAAA","sourceRoot":""} -------------------------------------------------------------------------------- /docs/vendors~main.59a2cbd2ea6051b1f337.bundle.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"vendors~main.59a2cbd2ea6051b1f337.bundle.js","sources":["webpack:///vendors~main.59a2cbd2ea6051b1f337.bundle.js"],"mappings":";AAAA","sourceRoot":""} -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | [ 4 | '@babel/preset-env', 5 | { 6 | targets: { 7 | node: 'current', 8 | }, 9 | }, 10 | ], 11 | ], 12 | }; 13 | -------------------------------------------------------------------------------- /examples/src/main.js: -------------------------------------------------------------------------------- 1 | import App from './App.svelte'; 2 | 3 | const app = new App({ 4 | target: document.body, 5 | props: { 6 | cloud_name: 'demo', 7 | image_public_id: 'sample', 8 | video_public_id: 'dog' 9 | } 10 | }); 11 | 12 | export default app; -------------------------------------------------------------------------------- /src/Video.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 13 | -------------------------------------------------------------------------------- /stories/image.stories.js: -------------------------------------------------------------------------------- 1 | //import { action } from '@storybook/addon-actions'; 2 | import {Image} from '../src/index'; 3 | 4 | export default { 5 | title: 'Image', 6 | component: Image, 7 | }; 8 | 9 | export const Sample = () => ({ 10 | Component: Image, 11 | props: { cloud_name: 'demo', public_id: 'sample'} 12 | }); 13 | -------------------------------------------------------------------------------- /stories/video.stories.js: -------------------------------------------------------------------------------- 1 | //import { action } from '@storybook/addon-actions'; 2 | import {Video} from '../src/index'; 3 | 4 | export default { 5 | title: 'Video', 6 | component: Video, 7 | }; 8 | 9 | export const Sample = () => ({ 10 | Component: Video, 11 | props: { cloud_name: 'demo', public_id: 'dog', controls: true}, 12 | }); 13 | -------------------------------------------------------------------------------- /examples/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Svelte app 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | 0.0.1-alpha.2 / 2021-05-02 2 | ================== 3 | 4 | * Fix server side rendering 5 | 6 | 0.0.1-alpha.1 / 2020-07-12 7 | ========================== 8 | 9 | * Add support for responsive image (#3) 10 | * Update cloudinary-core dependency to version 2.10.3 11 | * Update README 12 | * Add .travis.yml configuration (#5) 13 | 14 | 0.0.1-alpha.0 / 2020-16-04 15 | ========================== 16 | 17 | # Provide basic Cloudinary components 18 | 19 | * Image component 20 | * Video component 21 | -------------------------------------------------------------------------------- /test/video.spec.js: -------------------------------------------------------------------------------- 1 | import '@testing-library/jest-dom/extend-expect' 2 | import { render } from '@testing-library/svelte' 3 | import Video from '../src/Video.svelte' 4 | 5 | describe('Video', () => { 6 | test('src attribute should include cloud_name & public_id', () => { 7 | const { container } = render(Video, { cloud_name: 'demo', public_id: 'dog' }); 8 | const video = container.querySelector("video"); 9 | expect(video.childNodes[0].src).toBe( 10 | 'http://res.cloudinary.com/demo/video/upload/dog.webm' 11 | ); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | ## Feature request for Cloudinary Svelte SDK 11 | …(If your feature is for other SDKs, please request them there) 12 | 13 | ## Explain your use case 14 | … (A high-level explanation of why you need this feature) 15 | 16 | ## Describe the problem you’re trying to solve 17 | … (A more technical view of what you’d like to accomplish, and how this feature will help you achieve it) 18 | 19 | ## Do you have a proposed solution? 20 | … (yes, no? Please elaborate if needed) 21 | -------------------------------------------------------------------------------- /examples/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cloudinary-svelte-example-app", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "prebuild": "cd .. && npm run build", 6 | "prestart": "npm run build", 7 | "build": "rollup -c", 8 | "dev": "rollup -c -w", 9 | "start": "sirv public" 10 | }, 11 | "devDependencies": { 12 | "@rollup/plugin-commonjs": "^11.0.0", 13 | "@rollup/plugin-node-resolve": "^7.0.0", 14 | "rollup": "^1.20.0", 15 | "rollup-plugin-livereload": "^1.0.0", 16 | "rollup-plugin-svelte": "^5.0.3", 17 | "rollup-plugin-terser": "^5.1.2", 18 | "svelte": "^3.0.0" 19 | }, 20 | "dependencies": { 21 | "sirv-cli": "^0.4.4" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/Image.svelte: -------------------------------------------------------------------------------- 1 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | ### Brief Summary of Changes 2 | 3 | 4 | #### What does this PR address? 5 | - [ ] GitHub issue (Add reference - #XX) 6 | - [ ] Refactoring 7 | - [ ] New feature 8 | - [ ] Bug fix 9 | - [ ] Adds more tests 10 | 11 | #### Are tests included? 12 | - [ ] Yes 13 | - [ ] No 14 | 15 | #### Reviewer, please note: 16 | 23 | 24 | #### Checklist: 25 | 26 | 27 | - [ ] My code follows the code style of this project. 28 | - [ ] My change requires a change to the documentation. 29 | - [ ] I ran the full test suite before pushing the changes and all of the tests pass. 30 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | Storybook
-------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Cloudinary 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /examples/public/global.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | position: relative; 3 | width: 100%; 4 | height: 100%; 5 | } 6 | 7 | body { 8 | color: #333; 9 | margin: 0; 10 | padding: 8px; 11 | box-sizing: border-box; 12 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 13 | } 14 | 15 | a { 16 | color: rgb(0,100,200); 17 | text-decoration: none; 18 | } 19 | 20 | a:hover { 21 | text-decoration: underline; 22 | } 23 | 24 | a:visited { 25 | color: rgb(0,80,160); 26 | } 27 | 28 | label { 29 | display: block; 30 | } 31 | 32 | input, button, select, textarea { 33 | font-family: inherit; 34 | font-size: inherit; 35 | padding: 0.4em; 36 | margin: 0 0 0.5em 0; 37 | box-sizing: border-box; 38 | border: 1px solid #ccc; 39 | border-radius: 2px; 40 | } 41 | 42 | input:disabled { 43 | color: #ccc; 44 | } 45 | 46 | input[type="range"] { 47 | height: 0; 48 | } 49 | 50 | button { 51 | color: #333; 52 | background-color: #f4f4f4; 53 | outline: none; 54 | } 55 | 56 | button:disabled { 57 | color: #999; 58 | } 59 | 60 | button:not(:disabled):active { 61 | background-color: #ddd; 62 | } 63 | 64 | button:focus { 65 | border-color: #666; 66 | } 67 | 68 | .cld-responsive{ 69 | max-width:100%; 70 | max-height: 100%; 71 | } 72 | -------------------------------------------------------------------------------- /src/utils.js: -------------------------------------------------------------------------------- 1 | import {Cloudinary} from "cloudinary-core"; 2 | 3 | /** 4 | * Return object without null/undefined entries 5 | * @param {*} obj 6 | */ 7 | const nonEmpty = (obj) => Object.entries(obj).reduce((a, [k, v]) => (v == null ? a : { ...a, [k]: v }), {}); 8 | 9 | const getTag = (props, tagType) => { 10 | const { public_id, ...ops } = nonEmpty(props); // Remove null/undefined props 11 | const cld = Cloudinary.new(ops); // Initialize cloudinary with new props 12 | 13 | return cld[`${tagType}Tag`](public_id, ops); 14 | }; 15 | 16 | /** 17 | * Get a new tag initialized with given props 18 | * @param {*} props 19 | */ 20 | const getImageTag = (props) => getTag(props, "image"); 21 | 22 | /** 23 | * Get a new