diff --git a/package.json b/package.json index 29a6c6ded96..f1ab115c245 100644 --- a/package.json +++ b/package.json @@ -106,7 +106,7 @@ "overmind-devtools": "^26.0.2", "prettier": "2.1.1", "pretty-quick": "^3.0.0", - "typescript": "4.0.3", + "typescript": "4.1.2", "username": "^5.1.0" }, "resolutions": { diff --git a/packages/app/package.json b/packages/app/package.json index b8f6b768cba..bd58f67839c 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -359,7 +359,7 @@ "terser": "^4.1.4", "terser-webpack-plugin": "^1.4.1", "thread-loader": "^2.1.2", - "typescript": "4.0.3", + "typescript": "4.1.2", "url-loader": "1.0.1", "webpack": "^4.36.1", "webpack-bundle-analyzer": "^2.13.1", diff --git a/packages/app/src/app/overmind/effects/live/index.ts b/packages/app/src/app/overmind/effects/live/index.ts index feee62d5e5a..f6803e8e43b 100755 --- a/packages/app/src/app/overmind/effects/live/index.ts +++ b/packages/app/src/app/overmind/effects/live/index.ts @@ -363,7 +363,8 @@ class Live { } else { // we might try to send messages even when not on live, just // ignore it - resolve(); + // @ts-ignore this is probably not safe but whatever + resolve(undefined); } }); } diff --git a/packages/app/src/app/overmind/effects/vscode/Linter.ts b/packages/app/src/app/overmind/effects/vscode/Linter.ts index 48100d794d8..2b4fdfd8205 100644 --- a/packages/app/src/app/overmind/effects/vscode/Linter.ts +++ b/packages/app/src/app/overmind/effects/vscode/Linter.ts @@ -7,7 +7,7 @@ import LinterWorker from 'worker-loader?publicPath=/&name=monaco-linter.[hash:8] import { getCurrentModelPath } from './utils'; const requireAMDModule = paths => - new Promise(resolve => (window as any).require(paths, () => resolve())); + new Promise(resolve => (window as any).require(paths, () => resolve())); export class Linter { private worker: LinterWorker; diff --git a/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/common/fs.ts b/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/common/fs.ts index dc83d0d4428..d64689154b0 100644 --- a/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/common/fs.ts +++ b/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/common/fs.ts @@ -67,7 +67,7 @@ export async function initializeBrowserFS({ }; } = {}; - return new Promise(resolve => { + return new Promise(resolve => { const config = { ...BROWSER_FS_CONFIG }; let currentSandboxFs = {}; diff --git a/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/common/global.ts b/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/common/global.ts index 0677a79e515..a63ff58e378 100644 --- a/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/common/global.ts +++ b/packages/app/src/app/overmind/effects/vscode/extensionHostWorker/common/global.ts @@ -40,7 +40,7 @@ export const initializeGlobals = () => { export function initializeAll() { // eslint-disable-next-line no-async-promise-executor - return new Promise(async resolve => { + return new Promise(async resolve => { await initializePolyfills(); loadBrowserFS(); initializeGlobals(); diff --git a/packages/app/src/app/pages/Dashboard/Components/Folder/CreateFolder.tsx b/packages/app/src/app/pages/Dashboard/Components/Folder/CreateFolder.tsx index c84bf24548c..dd45a9e1972 100644 --- a/packages/app/src/app/pages/Dashboard/Components/Folder/CreateFolder.tsx +++ b/packages/app/src/app/pages/Dashboard/Components/Folder/CreateFolder.tsx @@ -58,7 +58,7 @@ export const CreateFolder = ({ basePath, setCreating }: DashboardNewFolder) => { }; const folderProps = { - name, + name: '', path: basePath, isDrafts: false, numberOfSandboxes: 0, diff --git a/packages/app/src/embed/components/Content/Monaco/mode.ts b/packages/app/src/embed/components/Content/Monaco/mode.ts index c00921031fc..da51c9cc601 100644 --- a/packages/app/src/embed/components/Content/Monaco/mode.ts +++ b/packages/app/src/embed/components/Content/Monaco/mode.ts @@ -1,5 +1,5 @@ const requireAMDModule = paths => - new Promise(resolve => (window as any).require(paths, () => resolve())); + new Promise(resolve => (window as any).require(paths, () => resolve())); export default async (title: string, monaco) => { if (title == null) return 'javascript'; diff --git a/packages/app/src/sandbox/codesandbox-overlay/index.ts b/packages/app/src/sandbox/codesandbox-overlay/index.ts index 830ed955112..c9383090276 100644 --- a/packages/app/src/sandbox/codesandbox-overlay/index.ts +++ b/packages/app/src/sandbox/codesandbox-overlay/index.ts @@ -14,7 +14,7 @@ export default function createOverlay(modules) { const parameters = getParameters({ files: normalized }); - return new Promise(resolve => { + return new Promise(resolve => { const iframe = document.createElement('iframe'); iframe.setAttribute( diff --git a/packages/app/src/sandbox/eval/tests/jest-lite.ts b/packages/app/src/sandbox/eval/tests/jest-lite.ts index 132a93c10f7..cc485568bd6 100644 --- a/packages/app/src/sandbox/eval/tests/jest-lite.ts +++ b/packages/app/src/sandbox/eval/tests/jest-lite.ts @@ -40,7 +40,7 @@ expect.extend({ expect.addSnapshotSerializer = addSerializer; function addScript(src: string) { - return new Promise((resolve, reject) => { + return new Promise((resolve, reject) => { const s = document.createElement('script'); s.setAttribute('src', src); document.body.appendChild(s); diff --git a/packages/codesandbox-api/package.json b/packages/codesandbox-api/package.json index b7bc2ca5df7..db947444504 100644 --- a/packages/codesandbox-api/package.json +++ b/packages/codesandbox-api/package.json @@ -95,7 +95,7 @@ "tslint-config-prettier": "^1.1.0", "tslint-config-standard": "^6.0.0", "typedoc": "^0.7.1", - "typescript": "4.0.3", + "typescript": "4.1.2", "uuid": "^3.3.2", "validate-commit-msg": "^2.12.2" }, diff --git a/packages/common/package.json b/packages/common/package.json index ce7d15d52c4..77612875514 100644 --- a/packages/common/package.json +++ b/packages/common/package.json @@ -116,7 +116,7 @@ "jest-styled-components": "^7.0.2", "jest-svg-transformer": "^1.0.0", "rimraf": "^2.6.3", - "typescript": "4.0.3", + "typescript": "4.1.2", "yarn": "^1.17.3" } } diff --git a/packages/components/package.json b/packages/components/package.json index 16b9049bc2f..8833184f316 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -73,7 +73,7 @@ "rimraf": "^3.0.0", "simple-git": "^2.17.0", "storybook-addon-styled-component-theme": "^1.3.0", - "typescript": "4.0.3" + "typescript": "4.1.2" }, "peerDependencies": { "react": "^16.9.0", diff --git a/packages/executors/package.json b/packages/executors/package.json index 37cc18e570a..8e6e605a85c 100644 --- a/packages/executors/package.json +++ b/packages/executors/package.json @@ -30,6 +30,6 @@ "@types/socket.io-client": "^1.4.32", "tsdx": "^0.6.1", "tslib": "^1.9.3", - "typescript": "4.0.3" + "typescript": "4.1.2" } } diff --git a/packages/homepage/content/articles/building-web-animations/images/greensock-banner.png b/packages/homepage/content/articles/building-web-animations/images/greensock-banner.png new file mode 100644 index 00000000000..ea748856ebf Binary files /dev/null and b/packages/homepage/content/articles/building-web-animations/images/greensock-banner.png differ diff --git a/packages/homepage/content/articles/building-web-animations/index.md b/packages/homepage/content/articles/building-web-animations/index.md new file mode 100644 index 00000000000..769887fdd8c --- /dev/null +++ b/packages/homepage/content/articles/building-web-animations/index.md @@ -0,0 +1,83 @@ +--- +banner: ./images/greensock-banner.png +slug: building-web-animations-with-greensock +authors: ['Adewale Abati'] +photo: https://avatars0.githubusercontent.com/u/4003538?s=460&v=4 +title: Build fun web animations and win prizes - CodeSandbox Challenges +description: + Participate in the CodeSandbox / GSAP web animation challenges and win fantastic prizes. +date: 2022-05-18 +--- + +Web animations, especially when used right, help create fun, interactive and engaging experiences for your website visitors. However, more often than not, they can be quite difficult to implement. + +As [CodeSandbox](https://codesandbox.io/) is dedicated to making web developers as productive as possible, we partnered with [Greensock](https://greensock.com/) (GSAP) to host some fun and creative challenges for the month of April. Greensock puts a lot of animation power in the hands of developers through it's robust JavaScript library and they have now made all the [Club Greensock](https://greensock.com/club/) premium plugins now available on [CodeSandbox](https://codesandbox.io/) via npm. šŸ”„ + +https://codesandbox.io/s/gsap-bonus-plugins-starter-m26x0?from-embed + +Every week through April, we shared a new creative coding challenge and a sandbox to get started building something fun. You can find out all about the challenges at [https://greensock.com/challenges](https://greensock.com/challenges). + +## Challenges + +The first challenge encouraged everyone to build something fun on `Scrolling animations with ScrollTrigger`. There were a lot of amazing submissions but [Victor](https://twitter.com/victorwork_) and [Ismael](https://twitter.com/ismamz) took the top spots. + + +[Here comes the sun](https://codesandbox.io/s/lr9qb2) by [Ismael](https://twitter.com/ismamz) + +https://codesandbox.io/s/lr9qb2?from-embed + + +[GSAP x CodeSandbox](https://codesandbox.io/s/cpwy8z) by [Victor](https://twitter.com/victorwork_) + +https://codesandbox.io/s/cpwy8z?from-embed + + + +The next challenge involved animating `SVG Strokes with DrawSVG`. Even more creative entries but our winners were [Christian](https://twitter.com/ctrl_alt_aldr) and [av](https://twitter.com/avpeace). + +[Cricut Drawings](https://codesandbox.io/s/r3zv9l) by [Christian](https://twitter.com/ctrl_alt_aldr) + +https://codesandbox.io/s/r3zv9l?from-embed + + +[Indiana Jones](https://codesandbox.io/s/zjw4mw) by [AV](https://twitter.com/avpeace) + +https://codesandbox.io/s/zjw4mw?from-embed + + +The final challenge using Greensockā€™s Flip plugin had our previous winners - [Victor](https://twitter.com/victorwork_) and [Christian](https://twitter.com/ctrl_alt_aldr) topping the charts again. So the well deserved runner ups - [Toso](https://twitter.com/_Tosoo) and [Julia](https://twitter.com/jhjanicki) took the prizes for this one. + +[Flip animation](https://codesandbox.io/s/cg2fhc) by [Christian](https://twitter.com/ctrl_alt_aldr) + +https://codesandbox.io/s/cg2fhc?from-embed + + +[Knowing the Alphabet](https://codesandbox.io/s/f93upv) by [Victor](https://twitter.com/victorwork_) + +https://codesandbox.io/s/f93upv?from-embed + +[SpaceX](https://codesandbox.io/s/m3yegl) by [Toso](https://twitter.com/_Tosoo) + +https://codesandbox.io/s/m3yegl?from-embed + + +[Tile builder](https://codesandbox.io/s/wizdwq) by [Julia](https://twitter.com/jhjanicki) + +https://codesandbox.io/s/wizdwq?from-embed + + +We want to say a big thanks to our judges who voted every week for their favorite demos despite how tough it got. + +- [Ace](https://twitter.com/Ace_KYD)Ā fromĀ [CodeSandbox](https://codesandbox.io/) +- [Alex Trost](https://twitter.com/trostcodes)Ā fromĀ [Prismic](https://prismic.io/) +- [Arno Di Nunzio](https://adinunz.io/) +- [Cassie Evans](https://twitter.com/cassiecodes)Ā from GreenSockĀ šŸ’š +- [Fabio Ottaviani](https://linktr.ee/supahfunk) +- [Gianmarco Simone](https://twitter.com/ggsimm) +- [Jake Whiteley](https://twitter.com/jakewhiteleydev)Ā fromĀ [GC](https://twitter.com/CraftedbyGC) +- [Mike Wagz](https://selfaware.studio/) +- [Pim de Wit](https://pim.dev/) +- [Ryan LaBar](https://twitter.com/Ryan_LaBar)Ā fromĀ [Elegant Seagulls](https://www.elegantseagulls.com/) +- [Stefan Vitasovic](https://twitter.com/StefanVitasovic/) + +Stay up to date with [@CodeSandbox](https://twitter.com/codesandbox) and [@Greensock](https://www.twitter.com/greensock) on Twitter. \ No newline at end of file diff --git a/packages/node-services/package.json b/packages/node-services/package.json index f8b43b0d881..6b945fa16da 100644 --- a/packages/node-services/package.json +++ b/packages/node-services/package.json @@ -27,6 +27,6 @@ "@types/node": "^11.10.5", "@types/resolve": "^0.0.8", "@types/ws": "^6.0.1", - "typescript": "4.0.3" + "typescript": "4.1.2" } } diff --git a/packages/react-embed/package.json b/packages/react-embed/package.json index 0828b775f86..253fe0a142c 100644 --- a/packages/react-embed/package.json +++ b/packages/react-embed/package.json @@ -26,7 +26,7 @@ "devDependencies": { "@types/react": "^16.9.17", "rimraf": "^2.6.2", - "typescript": "4.0.3" + "typescript": "4.1.2" }, "peerDependencies": { "react": "^15.0.0 | ^16.0.0" diff --git a/yarn.lock b/yarn.lock index 7706dcc9d91..af26b0cf0d0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -32759,7 +32759,7 @@ typescript-template-language-service-decorator@^1.2.0: resolved "https://registry.yarnpkg.com/typescript-template-language-service-decorator/-/typescript-template-language-service-decorator-1.7.1.tgz#60f825b6b2bab725c9a73eaff65cb598e81a1bc8" integrity sha512-Gk0WBNe73T87lpiSj37Xmwzvt5zkKaHT1chY5+v2KP4uhpHktqIcV1hMpxmzAong38EIEhGZWeKtxjxGmTMbqg== -typescript@*, typescript@4.0.3, typescript@^4.0.3: +typescript@*, typescript@^4.0.3: version "4.0.3" resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.0.3.tgz#153bbd468ef07725c1df9c77e8b453f8d36abba5" integrity sha512-tEu6DGxGgRJPb/mVPIZ48e69xCn2yRmCgYmDugAVwmJ6o+0u1RI18eO7E7WBTLYLaEVVOhwQmcdhQHweux/WPg== @@ -32769,6 +32769,11 @@ typescript@2.3.4: resolved "https://registry.yarnpkg.com/typescript/-/typescript-2.3.4.tgz#3d38321828231e434f287514959c37a82b629f42" integrity sha1-PTgyGCgjHkNPKHUUlZw3qCtin0I= +typescript@4.1.2: + version "4.1.2" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.1.2.tgz#6369ef22516fe5e10304aae5a5c4862db55380e9" + integrity sha512-thGloWsGH3SOxv1SoY7QojKi0tc+8FnOmiarEGMbd/lar7QOEd3hvlx3Fp5y6FlDUGl9L+pd4n2e+oToGMmhRQ== + typescript@^3.4.5: version "3.9.7" resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa"